Sākums Izpētīt Palīdzība
Pierakstīties
codeskraps
/
Blog
1
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Koks: c170171b62
Atzari Tagi
Blog
/
public
/
lib
/
icofont
/
demo.html

demo.html 1.8 KB
Vēsture Neapstrādāts

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 
  1. <!DOCTYPE html>
    2. 

  2. 	<html>
    3. 

  3. 	<head>
    4. 

  4. 		<meta charset="utf-8">
    5. 

  5. 		<title>Examples | IcoFont</title>
    6. 

  6. 		<link rel="stylesheet" type="text/css" href="./icofont.min.css">
    7. 

  7. 		<style type="text/css">
    8. 

  8. 			body {
    9. 

  9. 				margin: 0;
    10. 

  10. 				padding: 0;
    11. 

  11. 				background: #F6F6F9;
    12. 

  12. 			}
    13. 

  13. 			.header {
    14. 

  14. 				border-bottom: 1px solid #DCDCE1;
    15. 

  15. 				padding: 10px 0;
    16. 

  16. 				margin-bottom: 10px;
    17. 

  17. 			}
    18. 

  18. 			.container {
    19. 

  19. 				width: 980px;
    20. 

  20. 				margin: 0 auto;
    21. 

  21. 			}
    22. 

  22. 			.ico-title {
    23. 

  23. 				font-size: 2em;
    24. 

  24. 			}
    25. 

  25. 			.iconlist {
    26. 

  26. 				margin: 0;
    27. 

  27. 				padding: 0;
    28. 

  28. 				list-style: none;
    29. 

  29. 				text-align: center;
    30. 

  30. 				width: 100%;
    31. 

  31. 				display: flex;
    32. 

  32. 				flex-wrap: wrap;
    33. 

  33. 				flex-direction: row;
    34. 

  34. 			}
    35. 

  35. 			.iconlist li {
    36. 

  36. 				position: relative;
    37. 

  37. 				margin: 5px;
    38. 

  38. 				width: 150px;
    39. 

  39. 				cursor: pointer;
    40. 

  40. 			}
    41. 

  41. 			.iconlist li .icon-holder {
    42. 

  42. 				position: relative;
    43. 

  43. 				text-align: center;
    44. 

  44. 				border-radius: 3px;
    45. 

  45. 				overflow: hidden;
    46. 

  46. 				padding-bottom: 5px;
    47. 

  47. 				background: #ffffff;
    48. 

  48. 				border: 1px solid #E4E5EA;
    49. 

  49. 				transition: all 0.2s linear 0s;
    50. 

  50. 			}
    51. 

  51. 			.iconlist li .icon-holder:hover {
    52. 

  52. 				background: #00C3DA;
    53. 

  53. 				color: #ffffff;
    54. 

  54. 			}
    55. 

  55. 			.iconlist li .icon-holder:hover .icon i {
    56. 

  56. 				color: #ffffff;
    57. 

  57. 			}
    58. 

  58. 			.iconlist li .icon-holder .icon {
    59. 

  59. 				padding: 20px;
    60. 

  60. 				text-align: center;
    61. 

  61. 			}
    62. 

  62. 			.iconlist li .icon-holder .icon i {
    63. 

  63. 				font-size: 3em;
    64. 

  64. 				color: #1F1142;
    65. 

  65. 			}
    66. 

  66. 			.iconlist li .icon-holder span {
    67. 

  67. 				font-size: 14px;
    68. 

  68. 				display: block;
    69. 

  69. 				margin-top: 5px;
    70. 

  70. 				border-radius: 3px;
    71. 

  71. 			}
    72. 

  72. 		</style>
    73. 

  73. 	</head>
    74. 

  74. 	<body>
    75. 

  75. 	<div class="header">
    76. 

  76. 		<div class="container">
    77. 

  77. 			<h1 class="ico-title"> IcoFont Icons </h1>
    78. 

  78. 		</div>
    79. 

  79. 	</div>
    80. 

  80. 	<div class="container">
    81. 

  81. 		<ul class="iconlist">
    82. 

  82. 		
    83. 

  83. 		<li>
    84. 

  84. 			<div class="icon-holder">
    85. 

  85. 				<div class="icon"> 
    86. 

  86. 					<i class="icofont-rss"></i>
    87. 

  87. 				</div> 
    88. 

  88. 				<span> rss </span>
    89. 

  89. 			</div>
    90. 

  90. 		</li>
    91. 

  91. 		
    92. 

  92. 		</ul>
    93. 

  93. 	</div>	
    94. 

  94. 	</body>
    95. 

  95. 	</html>
    96. 

  96. 	
    97.