一、介绍

采用这种字体，我们可以避免网站制作中采用好多图片，一方面解决了浏览器的兼容性问题。另一方面，这些字体都是矢量字体，我们只要在调整这些图标时，将他们的字体大小以及颜色，我们就可以解决很多不是图片的图标了。

二、使用原因

今天在用到jquery.mmenu.js过程中（手机上的单个按钮菜单，具体将在下一节讲到），也是从网上找到的一个简单的demo，很简单的，如下图：

于是我把它拿下来进行研究，但是所有元素都拿下来了，就是有一个图标不显示，如下图。

研究了半天，终于发现了问题所在！由此也进一步对CSS的字体有了进一步了解！现在分享与大家！demo如下

  对于不太懂这款CSS的人，可以一步一步查看这款样式进行分析研究！

第一步：准备工作

将font-face.css放在css目录下，将放置fonts目录在根目录下，下边放四个文件，分别是
glyphicons-halflings-regular.eot , glyphicons-halflings-regular.svg ,
glyphicons-halflings-regular.ttf , glyphicons-halflings-regular.woff 。
如果不懂为什么，我建议看一看这篇博文，很有帮助的！《

CSS3 @font-face》   http://www.cnblogs.com/rubylouvre/archive/2011/06/19/2084875.html

第二步：引入HTML和CSS代码粘贴下边

  1. <link href="css/font-face.css" rel="stylesheet" type="text/css">
  2. <a href="#" class="glyphicon glyphicon-th-list"></a>

font-face.css 可以点击这里进行下载。 http://www.ijquery.cn/css/font-face.css

第三步：将这个图标按处理字体一样用CSS处理一下就可以了。以下仅作参考。

  1. <style type="text/css">
  2. 	.f24{font-size:24px;}
  3. 	.cred{color:#FF0000;}
  4. 	.tdn{text-decoration:none;}
  5. </style>
  6. <a href="#" class="glyphicon glyphicon-th-list f24 cred tdn"></a>

三、完整版下载及使用

注意：我在前边标的序号是为了让大家更好的应用相应的 font-face.css ，更好地与后边的CSS对应而这样写的！

HTML代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
  6. 		<title>矢量图片</title>
  7. 		<link href="css/font-face.css" rel="stylesheet" type="text/css">
  8. 		<style type="text/css">
  9. 			body{background:#999;}
  10. 			.l_tbn span{float:left;}
  11. 			.l_tbn a{float:left;display:block;overflow:hidden;color:#fff;text-decoration:none;font-size:24px;}
  12. 			.l_tbn a:hover{color:#fff;}
  13. 		</style>
  14. 	</head>
  15.  
  16. 	<body>
  17. 		<div class="l_tbn">
  18. 			<span>001、</span><a href="#menu" class="glyphicon glyphicon-glass"></a>
  19. 			<span>002、</span><a href="#menu" class="glyphicon glyphicon-music"></a>
  20. 			<span>003、</span><a href="#menu" class="glyphicon glyphicon-search"></a>
  21. 			<span>004、</span><a href="#menu" class="glyphicon glyphicon-envelope"></a>
  22. 			<span>005、</span><a href="#menu" class="glyphicon glyphicon-heart"></a>
  23. 			<span>006、</span><a href="#menu" class="glyphicon glyphicon-star"></a>
  24. 			<span>007、</span><a href="#menu" class="glyphicon glyphicon-star-empty"></a>
  25. 			<span>008、</span><a href="#menu" class="glyphicon glyphicon-user"></a>
  26. 			<span>009、</span><a href="#menu" class="glyphicon glyphicon-film"></a>
  27. 			<span>010、</span><a href="#menu" class="glyphicon glyphicon-th-large"></a>
  28. 			<span>011、</span><a href="#menu" class="glyphicon glyphicon-th"></a>
  29. 			<span>012、</span><a href="#menu" class="glyphicon glyphicon-th-list"></a>
  30. 			<span>013、</span><a href="#menu" class="glyphicon glyphicon-ok"></a>
  31. 			<span>014、</span><a href="#menu" class="glyphicon glyphicon-remove"></a>
  32. 			<span>015、</span><a href="#menu" class="glyphicon glyphicon-zoom-in"></a>
  33. 			<span>016、</span><a href="#menu" class="glyphicon glyphicon-zoom-out"></a>
  34. 			<span>017、</span><a href="#menu" class="glyphicon glyphicon-off"></a>
  35. 			<span>018、</span><a href="#menu" class="glyphicon glyphicon-signal"></a>
  36. 			<span>019、</span><a href="#menu" class="glyphicon glyphicon-cog"></a>
  37. 			<span>020、</span><a href="#menu" class="glyphicon glyphicon-trash"></a>
  38. 			<span>021、</span><a href="#menu" class="glyphicon glyphicon-home"></a>
  39. 			<span>022、</span><a href="#menu" class="glyphicon glyphicon-file"></a>
  40. 			<span>023、</span><a href="#menu" class="glyphicon glyphicon-time"></a>
  41. 			<span>024、</span><a href="#menu" class="glyphicon glyphicon-road"></a>
  42. 			<span>025、</span><a href="#menu" class="glyphicon glyphicon-download-alt"></a>
  43. 			<span>026、</span><a href="#menu" class="glyphicon glyphicon-download"></a>
  44. 			<span>027、</span><a href="#menu" class="glyphicon glyphicon-upload"></a>
  45. 			<span>028、</span><a href="#menu" class="glyphicon glyphicon-inbox"></a>
  46. 			<span>029、</span><a href="#menu" class="glyphicon glyphicon-play-circle"></a>
  47. 			<span>030、</span><a href="#menu" class="glyphicon glyphicon-repeat"></a>
  48. 			<span>031、</span><a href="#menu" class="glyphicon glyphicon-refresh"></a>
  49. 			<span>032、</span><a href="#menu" class="glyphicon glyphicon-list-alt"></a>
  50. 			<span>033、</span><a href="#menu" class="glyphicon glyphicon-lock"></a>
  51. 			<span>034、</span><a href="#menu" class="glyphicon glyphicon-flag"></a>
  52. 			<span>035、</span><a href="#menu" class="glyphicon glyphicon-headphones"></a>
  53. 			<span>036、</span><a href="#menu" class="glyphicon glyphicon-volume-off"></a>
  54. 			<span>037、</span><a href="#menu" class="glyphicon glyphicon-volume-down"></a>
  55. 			<span>038、</span><a href="#menu" class="glyphicon glyphicon-volume-up"></a>
  56. 			<span>039、</span><a href="#menu" class="glyphicon glyphicon-qrcode"></a>
  57. 			<span>040、</span><a href="#menu" class="glyphicon glyphicon-barcode"></a>
  58. 			<span>041、</span><a href="#menu" class="glyphicon glyphicon-tag"></a>
  59. 			<span>042、</span><a href="#menu" class="glyphicon glyphicon-tags"></a>
  60. 			<span>043、</span><a href="#menu" class="glyphicon glyphicon-book"></a>
  61. 			<span>044、</span><a href="#menu" class="glyphicon glyphicon-bookmark"></a>
  62. 			<span>045、</span><a href="#menu" class="glyphicon glyphicon-print"></a>
  63. 			<span>046、</span><a href="#menu" class="glyphicon glyphicon-camera"></a>
  64. 			<span>047、</span><a href="#menu" class="glyphicon glyphicon-font"></a>
  65. 			<span>048、</span><a href="#menu" class="glyphicon glyphicon-bold"></a>
  66. 			<span>049、</span><a href="#menu" class="glyphicon glyphicon-italic"></a>
  67. 			<span>050、</span><a href="#menu" class="glyphicon glyphicon-text-height"></a>
  68. 			<span>051、</span><a href="#menu" class="glyphicon glyphicon-text-width"></a>
  69. 			<span>052、</span><a href="#menu" class="glyphicon glyphicon-align-left"></a>
  70. 			<span>053、</span><a href="#menu" class="glyphicon glyphicon-align-center"></a>
  71. 			<span>054、</span><a href="#menu" class="glyphicon glyphicon-align-right"></a>
  72. 			<span>055、</span><a href="#menu" class="glyphicon glyphicon-align-justify"></a>
  73. 			<span>056、</span><a href="#menu" class="glyphicon glyphicon-list"></a>
  74. 			<span>057、</span><a href="#menu" class="glyphicon glyphicon-indent-left"></a>
  75. 			<span>058、</span><a href="#menu" class="glyphicon glyphicon-indent-right"></a>
  76. 			<span>059、</span><a href="#menu" class="glyphicon glyphicon-facetime-video"></a>
  77. 			<span>060、</span><a href="#menu" class="glyphicon glyphicon-pencil"></a>
  78. 			<span>061、</span><a href="#menu" class="glyphicon glyphicon-picture"></a>
  79. 			<span>062、</span><a href="#menu" class="glyphicon glyphicon-map-marker"></a>
  80. 			<span>063、</span><a href="#menu" class="glyphicon glyphicon-adjust"></a>
  81. 			<span>064、</span><a href="#menu" class="glyphicon glyphicon-tint"></a>
  82. 			<span>065、</span><a href="#menu" class="glyphicon glyphicon-edit"></a>
  83. 			<span>066、</span><a href="#menu" class="glyphicon glyphicon-share"></a>
  84. 			<span>067、</span><a href="#menu" class="glyphicon glyphicon-check"></a>
  85. 			<span>068、</span><a href="#menu" class="glyphicon glyphicon-move"></a>
  86. 			<span>069、</span><a href="#menu" class="glyphicon glyphicon-step-backward"></a>
  87. 			<span>070、</span><a href="#menu" class="glyphicon glyphicon-fast-backward"></a>
  88. 			<span>071、</span><a href="#menu" class="glyphicon glyphicon-backward"></a>
  89. 			<span>072、</span><a href="#menu" class="glyphicon glyphicon-play"></a>
  90. 			<span>073、</span><a href="#menu" class="glyphicon glyphicon-pause"></a>
  91. 			<span>074、</span><a href="#menu" class="glyphicon glyphicon-stop"></a>
  92. 			<span>075、</span><a href="#menu" class="glyphicon glyphicon-forward"></a>
  93. 			<span>076、</span><a href="#menu" class="glyphicon glyphicon-fast-forward"></a>
  94. 			<span>077、</span><a href="#menu" class="glyphicon glyphicon-step-forward"></a>
  95. 			<span>078、</span><a href="#menu" class="glyphicon glyphicon-eject"></a>
  96. 			<span>079、</span><a href="#menu" class="glyphicon glyphicon-chevron-left"></a>
  97. 			<span>080、</span><a href="#menu" class="glyphicon glyphicon-chevron-right"></a>
  98. 			<span>081、</span><a href="#menu" class="glyphicon glyphicon-plus-sign"></a>
  99. 			<span>082、</span><a href="#menu" class="glyphicon glyphicon-minus-sign"></a>
  100. 			<span>083、</span><a href="#menu" class="glyphicon glyphicon-remove-sign"></a>
  101. 			<span>084、</span><a href="#menu" class="glyphicon glyphicon-ok-sign"></a>
  102. 			<span>085、</span><a href="#menu" class="glyphicon glyphicon-question-sign"></a>
  103. 			<span>086、</span><a href="#menu" class="glyphicon glyphicon-info-sign"></a>
  104. 			<span>087、</span><a href="#menu" class="glyphicon glyphicon-screenshot"></a>
  105. 			<span>088、</span><a href="#menu" class="glyphicon glyphicon-remove-circle"></a>
  106. 			<span>089、</span><a href="#menu" class="glyphicon glyphicon-ok-circle"></a>
  107. 			<span>090、</span><a href="#menu" class="glyphicon glyphicon-ban-circle"></a>
  108. 			<span>091、</span><a href="#menu" class="glyphicon glyphicon-arrow-left"></a>
  109. 			<span>092、</span><a href="#menu" class="glyphicon glyphicon-arrow-right"></a>
  110. 			<span>093、</span><a href="#menu" class="glyphicon glyphicon-arrow-up"></a>
  111. 			<span>094、</span><a href="#menu" class="glyphicon glyphicon-arrow-down"></a>
  112. 			<span>095、</span><a href="#menu" class="glyphicon glyphicon-share-alt"></a>
  113. 			<span>096、</span><a href="#menu" class="glyphicon glyphicon-resize-full"></a>
  114. 			<span>097、</span><a href="#menu" class="glyphicon glyphicon-resize-small"></a>
  115. 			<span>098、</span><a href="#menu" class="glyphicon glyphicon-plus"></a>  <!--98-->
  116. 			<span>099、</span><a href="#menu" class="glyphicon glyphicon-minus"></a> <!--99-->
  117. 			<span>100、</span><a href="#menu" class="glyphicon glyphicon-asterisk"></a> <!--100-->
  118. 			<span>101、</span><a href="#menu" class="glyphicon glyphicon-exclamation-sign"></a>
  119. 			<span>102、</span><a href="#menu" class="glyphicon glyphicon-gift"></a>
  120. 			<span>103、</span><a href="#menu" class="glyphicon glyphicon-leaf"></a>
  121. 			<span>104、</span><a href="#menu" class="glyphicon glyphicon-fire"></a>
  122. 			<span>105、</span><a href="#menu" class="glyphicon glyphicon-eye-open"></a>
  123. 			<span>106、</span><a href="#menu" class="glyphicon glyphicon-eye-close"></a>
  124. 			<span>107、</span><a href="#menu" class="glyphicon glyphicon-warning-sign"></a>
  125. 			<span>108、</span><a href="#menu" class="glyphicon glyphicon-plane"></a>
  126. 			<span>100、</span><a href="#menu" class="glyphicon glyphicon-calendar"></a>
  127. 			<span>110、</span><a href="#menu" class="glyphicon glyphicon-random"></a>
  128. 			<span>111、</span><a href="#menu" class="glyphicon glyphicon-comment"></a>
  129. 			<span>112、</span><a href="#menu" class="glyphicon glyphicon-magnet"></a>
  130. 			<span>113、</span><a href="#menu" class="glyphicon glyphicon-chevron-up"></a>
  131. 			<span>114、</span><a href="#menu" class="glyphicon glyphicon-chevron-down"></a>
  132. 			<span>115、</span><a href="#menu" class="glyphicon glyphicon-retweet"></a>
  133. 			<span>116、</span><a href="#menu" class="glyphicon glyphicon-shopping-cart"></a>
  134. 			<span>117、</span><a href="#menu" class="glyphicon glyphicon-folder-close"></a>
  135. 			<span>118、</span><a href="#menu" class="glyphicon glyphicon-folder-open"></a>
  136. 			<span>119、</span><a href="#menu" class="glyphicon glyphicon-resize-vertical"></a>
  137. 			<span>120、</span><a href="#menu" class="glyphicon glyphicon-resize-horizontal"></a>
  138. 			<span>121、</span><a href="#menu" class="glyphicon glyphicon-hdd"></a>
  139. 			<span>122、</span><a href="#menu" class="glyphicon glyphicon-bullhorn"></a>
  140. 			<span>123、</span><a href="#menu" class="glyphicon glyphicon-bell"></a>
  141. 			<span>124、</span><a href="#menu" class="glyphicon glyphicon-certificate"></a>
  142. 			<span>125、</span><a href="#menu" class="glyphicon glyphicon-thumbs-up"></a>
  143. 			<span>126、</span><a href="#menu" class="glyphicon glyphicon-thumbs-down"></a>
  144. 			<span>127、</span><a href="#menu" class="glyphicon glyphicon-hand-right"></a>
  145. 			<span>128、</span><a href="#menu" class="glyphicon glyphicon-hand-left"></a>
  146. 			<span>129、</span><a href="#menu" class="glyphicon glyphicon-hand-up"></a>
  147. 			<span>130、</span><a href="#menu" class="glyphicon glyphicon-hand-down"></a>
  148. 			<span>131、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-right"></a>
  149. 			<span>132、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-left"></a>
  150. 			<span>133、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-up"></a>
  151. 			<span>134、</span><a href="#menu" class="glyphicon glyphicon-circle-arrow-down"></a>
  152. 			<span>135、</span><a href="#menu" class="glyphicon glyphicon-globe"></a>
  153. 			<span>136、</span><a href="#menu" class="glyphicon glyphicon-wrench"></a>
  154. 			<span>137、</span><a href="#menu" class="glyphicon glyphicon-tasks"></a>
  155. 			<span>138、</span><a href="#menu" class="glyphicon glyphicon-filter"></a>
  156. 			<span>139、</span><a href="#menu" class="glyphicon glyphicon-briefcase"></a>
  157. 			<span>140、</span><a href="#menu" class="glyphicon glyphicon-fullscreen"></a>
  158. 			<span>141、</span><a href="#menu" class="glyphicon glyphicon-dashboard"></a>
  159. 			<span>142、</span><a href="#menu" class="glyphicon glyphicon-paperclip"></a>
  160. 			<span>143、</span><a href="#menu" class="glyphicon glyphicon-heart-empty"></a>
  161. 			<span>144、</span><a href="#menu" class="glyphicon glyphicon-link"></a>
  162. 			<span>145、</span><a href="#menu" class="glyphicon glyphicon-phone"></a>
  163. 			<span>146、</span><a href="#menu" class="glyphicon glyphicon-pushpin"></a>
  164. 			<span>147、</span><a href="#menu" class="glyphicon glyphicon-euro"></a>
  165. 			<span>148、</span><a href="#menu" class="glyphicon glyphicon-usd"></a>
  166. 			<span>149、</span><a href="#menu" class="glyphicon glyphicon-gbp"></a>
  167. 			<span>150、</span><a href="#menu" class="glyphicon glyphicon-sort"></a>
  168. 			<span>151、</span><a href="#menu" class="glyphicon glyphicon-sort-by-alphabet"></a>
  169. 			<span>152、</span><a href="#menu" class="glyphicon glyphicon-sort-by-alphabet-alt"></a>
  170. 			<span>153、</span><a href="#menu" class="glyphicon glyphicon-sort-by-order"></a>
  171. 			<span>154、</span><a href="#menu" class="glyphicon glyphicon-sort-by-order-alt"></a>
  172. 			<span>155、</span><a href="#menu" class="glyphicon glyphicon-sort-by-attributes"></a>
  173. 			<span>156、</span><a href="#menu" class="glyphicon glyphicon-sort-by-attributes-alt"></a>
  174. 			<span>157、</span><a href="#menu" class="glyphicon glyphicon-unchecked"></a>
  175. 			<span>158、</span><a href="#menu" class="glyphicon glyphicon-expand"></a>
  176. 			<span>159、</span><a href="#menu" class="glyphicon glyphicon-collapse"></a>
  177. 			<span>160、</span><a href="#menu" class="glyphicon glyphicon-collapse-top"></a>
  178.  
  179. 		</div>
  180. 	</body>
  181. </html>

CSS代码：

  1. @font-face {
  2.  
  3. 	font-family:'Glyphicons Halflings';
  4. 	src:url('../fonts/glyphicons-halflings-regular.eot');   /* IE9 Compat Modes */
  5. 	src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */
  6. 	url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  /* Modern Browsers */
  7. 	url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),/* Safari, Android, iOS */
  8. 	url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); /* Legacy iOS */
  9.  
  10. }
  11.  
  12. .glyphicon:before {
  13. 	font-family: 'Glyphicons Halflings';
  14. 	font-style: normal;
  15. 	-webkit-font-smoothing: antialiased
  16. }
  17.  
  18. .glyphicon-glass:before {
  19. 	content: "\e001"
  20. }
  21.  
  22. .glyphicon-music:before {
  23. 	content: "\e002"
  24. }
  25.  
  26. .glyphicon-search:before {
  27. 	content: "\e003"
  28. }
  29.  
  30. .glyphicon-envelope:before {
  31. 	content: "\2709"
  32. }
  33.  
  34. .glyphicon-heart:before {
  35. 	content: "\e005"
  36. }
  37.  
  38. .glyphicon-star:before {
  39. 	content: "\e006"
  40. }
  41.  
  42. .glyphicon-star-empty:before {
  43. 	content: "\e007"
  44. }
  45.  
  46. .glyphicon-user:before {
  47. 	content: "\e008"
  48. }
  49.  
  50. .glyphicon-film:before {
  51. 	content: "\e009"
  52. }
  53.  
  54. .glyphicon-th-large:before {
  55. 	content: "\e010";
  56. }
  57.  
  58. .glyphicon-th:before {
  59. 	content: "\e011"
  60. }
  61.  
  62. .glyphicon-th-list:before {
  63. 	content: "\e012"
  64. }
  65.  
  66. .glyphicon-ok:before {
  67. 	content: "\e013"
  68. }
  69.  
  70. .glyphicon-remove:before {
  71. 	content: "\e014"
  72. }
  73.  
  74. .glyphicon-zoom-in:before {
  75. 	content: "\e015"
  76. }
  77.  
  78. .glyphicon-zoom-out:before {
  79. 	content: "\e016"
  80. }
  81.  
  82. .glyphicon-off:before {
  83. 	content: "\e017"
  84. }
  85.  
  86. .glyphicon-signal:before {
  87. 	content: "\e018"
  88. }
  89.  
  90. .glyphicon-cog:before {
  91. 	content: "\e019"
  92. }
  93.  
  94. .glyphicon-trash:before {
  95. 	content: "\e020"
  96. }
  97.  
  98. .glyphicon-home:before {
  99. 	content: "\e021"
  100. }
  101.  
  102. .glyphicon-file:before {
  103. 	content: "\e022"
  104. }
  105.  
  106. .glyphicon-time:before {
  107. 	content: "\e023"
  108. }
  109.  
  110. .glyphicon-road:before {
  111. 	content: "\e024"
  112. }
  113.  
  114. .glyphicon-download-alt:before {
  115. 	content: "\e025"
  116. }
  117.  
  118. .glyphicon-download:before {
  119. 	content: "\e026"
  120. }
  121.  
  122. .glyphicon-upload:before {
  123. 	content: "\e027"
  124. }
  125.  
  126. .glyphicon-inbox:before {
  127. 	content: "\e028"
  128. }
  129.  
  130. .glyphicon-play-circle:before {
  131. 	content: "\e029"
  132. }
  133.  
  134. .glyphicon-repeat:before {
  135. 	content: "\e030"
  136. }
  137.  
  138. .glyphicon-refresh:before {
  139. 	content: "\e031"
  140. }
  141.  
  142. .glyphicon-list-alt:before {
  143. 	content: "\e032"
  144. }
  145.  
  146. .glyphicon-lock:before {
  147. 	content: "\e033"
  148. }
  149.  
  150. .glyphicon-flag:before {
  151. 	content: "\e034"
  152. }
  153.  
  154. .glyphicon-headphones:before {
  155. 	content: "\e035"
  156. }
  157.  
  158. .glyphicon-volume-off:before {
  159. 	content: "\e036"
  160. }
  161.  
  162. .glyphicon-volume-down:before {
  163. 	content: "\e037"
  164. }
  165.  
  166. .glyphicon-volume-up:before {
  167. 	content: "\e038"
  168. }
  169.  
  170. .glyphicon-qrcode:before {
  171. 	content: "\e039"
  172. }
  173.  
  174. .glyphicon-barcode:before {
  175. 	content: "\e040"
  176. }
  177.  
  178. .glyphicon-tag:before {
  179. 	content: "\e041"
  180. }
  181.  
  182. .glyphicon-tags:before {
  183. 	content: "\e042"
  184. }
  185.  
  186. .glyphicon-book:before {
  187. 	content: "\e043"
  188. }
  189.  
  190. .glyphicon-bookmark:before {
  191. 	content: "\e044"
  192. }
  193.  
  194. .glyphicon-print:before {
  195. 	content: "\e045"
  196. }
  197.  
  198. .glyphicon-camera:before {
  199. 	content: "\e046"
  200. }
  201.  
  202. .glyphicon-font:before {
  203. 	content: "\e047"
  204. }
  205.  
  206. .glyphicon-bold:before {
  207. 	content: "\e048"
  208. }
  209.  
  210. .glyphicon-italic:before {
  211. 	content: "\e049"
  212. }
  213.  
  214. .glyphicon-text-height:before {
  215. 	content: "\e050"
  216. }
  217.  
  218. .glyphicon-text-width:before {
  219. 	content: "\e051"
  220. }
  221.  
  222. .glyphicon-align-left:before {
  223. 	content: "\e052"
  224. }
  225.  
  226. .glyphicon-align-center:before {
  227. 	content: "\e053"
  228. }
  229.  
  230. .glyphicon-align-right:before {
  231. 	content: "\e054"
  232. }
  233.  
  234. .glyphicon-align-justify:before {
  235. 	content: "\e055"
  236. }
  237.  
  238. .glyphicon-list:before {
  239. 	content: "\e056"
  240. }
  241.  
  242. .glyphicon-indent-left:before {
  243. 	content: "\e057"
  244. }
  245.  
  246. .glyphicon-indent-right:before {
  247. 	content: "\e058"
  248. }
  249.  
  250. .glyphicon-facetime-video:before {
  251. 	content: "\e059"
  252. }
  253.  
  254. .glyphicon-picture:before {
  255. 	content: "\e060"
  256. }
  257.  
  258. .glyphicon-pencil:before {
  259. 	content: "\270f"  /*这个有些特殊*/
  260. }
  261.  
  262. .glyphicon-map-marker:before {
  263. 	content: "\e062"
  264. }
  265.  
  266. .glyphicon-adjust:before {
  267. 	content: "\e063"
  268. }
  269.  
  270. .glyphicon-tint:before {
  271. 	content: "\e064"
  272. }
  273.  
  274. .glyphicon-edit:before {
  275. 	content: "\e065"
  276. }
  277.  
  278. .glyphicon-share:before {
  279. 	content: "\e066"
  280. }
  281.  
  282. .glyphicon-check:before {
  283. 	content: "\e067"
  284. }
  285.  
  286. .glyphicon-move:before {
  287. 	content: "\e068"
  288. }
  289.  
  290. .glyphicon-step-backward:before {
  291. 	content: "\e069"
  292. }
  293.  
  294. .glyphicon-fast-backward:before {
  295. 	content: "\e070"
  296. }
  297.  
  298. .glyphicon-backward:before {
  299. 	content: "\e071"
  300. }
  301.  
  302. .glyphicon-play:before {
  303. 	content: "\e072"
  304. }
  305.  
  306. .glyphicon-pause:before {
  307. 	content: "\e073"
  308. }
  309.  
  310. .glyphicon-stop:before {
  311. 	content: "\e074"
  312. }
  313.  
  314. .glyphicon-forward:before {
  315. 	content: "\e075"
  316. }
  317.  
  318. .glyphicon-fast-forward:before {
  319. 	content: "\e076"
  320. }
  321.  
  322. .glyphicon-step-forward:before {
  323. 	content: "\e077"
  324. }
  325.  
  326. .glyphicon-eject:before {
  327. 	content: "\e078"
  328. }
  329.  
  330. .glyphicon-chevron-left:before {
  331. 	content: "\e079"
  332. }
  333.  
  334. .glyphicon-chevron-right:before {
  335. 	content: "\e080"
  336. }
  337.  
  338. .glyphicon-plus-sign:before {
  339. 	content: "\e081"
  340. }
  341.  
  342. .glyphicon-minus-sign:before {
  343. 	content: "\e082"
  344. }
  345.  
  346. .glyphicon-remove-sign:before {
  347. 	content: "\e083"
  348. }
  349.  
  350. .glyphicon-ok-sign:before {
  351. 	content: "\e084"
  352. }
  353.  
  354. .glyphicon-question-sign:before {
  355. 	content: "\e085"
  356. }
  357.  
  358. .glyphicon-info-sign:before {
  359. 	content: "\e086"
  360. }
  361.  
  362. .glyphicon-screenshot:before {
  363. 	content: "\e087"
  364. }
  365.  
  366. .glyphicon-remove-circle:before {
  367. 	content: "\e088"
  368. }
  369.  
  370. .glyphicon-ok-circle:before {
  371. 	content: "\e089"
  372. }
  373.  
  374. .glyphicon-ban-circle:before {
  375. 	content: "\e090"
  376. }
  377.  
  378. .glyphicon-arrow-left:before {
  379. 	content: "\e091"
  380. }
  381.  
  382. .glyphicon-arrow-right:before {
  383. 	content: "\e092"
  384. }
  385.  
  386. .glyphicon-arrow-up:before {
  387. 	content: "\e093"
  388. }
  389.  
  390. .glyphicon-arrow-down:before {
  391. 	content: "\e094"
  392. }
  393.  
  394. .glyphicon-share-alt:before {
  395. 	content: "\e095"
  396. }
  397.  
  398. .glyphicon-resize-full:before {
  399. 	content: "\e096"
  400. }
  401.  
  402. .glyphicon-resize-small:before {
  403. 	content: "\e097"
  404. }
  405.  
  406. .glyphicon-plus:before {
  407. 	content: "\002b"  /* 98 */
  408. }
  409.  
  410. .glyphicon-minus:before {
  411. 	content: "\2212"  /* 99 */
  412. }
  413.  
  414. .glyphicon-asterisk:before {
  415. 	content: "\002a"  /* 100 */
  416. }
  417.  
  418. .glyphicon-exclamation-sign:before {
  419. 	content: "\e101"
  420. }
  421.  
  422. .glyphicon-gift:before {
  423. 	content: "\e102"
  424. }
  425.  
  426. .glyphicon-leaf:before {
  427. 	content: "\e103"
  428. }
  429.  
  430. .glyphicon-fire:before {
  431. 	content: "\e104"
  432. }
  433.  
  434. .glyphicon-eye-open:before {
  435. 	content: "\e105"
  436. }
  437.  
  438. .glyphicon-eye-close:before {
  439. 	content: "\e106"
  440. }
  441.  
  442. .glyphicon-warning-sign:before {
  443. 	content: "\e107"
  444. }
  445.  
  446. .glyphicon-plane:before {
  447. 	content: "\e108"
  448. }
  449.  
  450. .glyphicon-calendar:before {
  451. 	content: "\e109"
  452. }
  453.  
  454. .glyphicon-random:before {
  455. 	content: "\e110"
  456. }
  457.  
  458. .glyphicon-comment:before {
  459. 	content: "\e111"
  460. }
  461.  
  462. .glyphicon-magnet:before {
  463. 	content: "\e112"
  464. }
  465.  
  466. .glyphicon-chevron-up:before {
  467. 	content: "\e113"
  468. }
  469.  
  470. .glyphicon-chevron-down:before {
  471. 	content: "\e114"
  472. }
  473.  
  474. .glyphicon-retweet:before {
  475. 	content: "\e115"
  476. }
  477.  
  478. .glyphicon-shopping-cart:before {
  479. 	content: "\e116"
  480. }
  481.  
  482. .glyphicon-folder-close:before {
  483. 	content: "\e117"
  484. }
  485.  
  486. .glyphicon-folder-open:before {
  487. 	content: "\e118"
  488. }
  489.  
  490. .glyphicon-resize-vertical:before {
  491. 	content: "\e119"
  492. }
  493.  
  494. .glyphicon-resize-horizontal:before {
  495. 	content: "\e120"
  496. }
  497.  
  498. .glyphicon-hdd:before {
  499. 	content: "\e121"
  500. }
  501.  
  502. .glyphicon-bullhorn:before {
  503. 	content: "\e122"
  504. }
  505.  
  506. .glyphicon-bell:before {
  507. 	content: "\e123"
  508. }
  509.  
  510. .glyphicon-certificate:before {
  511. 	content: "\e124"
  512. }
  513.  
  514. .glyphicon-thumbs-up:before {
  515. 	content: "\e125"
  516. }
  517.  
  518. .glyphicon-thumbs-down:before {
  519. 	content: "\e126"
  520. }
  521.  
  522. .glyphicon-hand-right:before {
  523. 	content: "\e127"
  524. }
  525.  
  526. .glyphicon-hand-left:before {
  527. 	content: "\e128"
  528. }
  529.  
  530. .glyphicon-hand-up:before {
  531. 	content: "\e129"
  532. }
  533.  
  534. .glyphicon-hand-down:before {
  535. 	content: "\e130"
  536. }
  537.  
  538. .glyphicon-circle-arrow-right:before {
  539. 	content: "\e131"
  540. }
  541.  
  542. .glyphicon-circle-arrow-left:before {
  543. 	content: "\e132"
  544. }
  545.  
  546. .glyphicon-circle-arrow-up:before {
  547. 	content: "\e133"
  548. }
  549.  
  550. .glyphicon-circle-arrow-down:before {
  551. 	content: "\e134"
  552. }
  553.  
  554. .glyphicon-globe:before {
  555. 	content: "\e135"
  556. }
  557.  
  558. .glyphicon-wrench:before {
  559. 	content: "\e136"
  560. }
  561.  
  562. .glyphicon-tasks:before {
  563. 	content: "\e137"
  564. }
  565.  
  566. .glyphicon-filter:before {
  567. 	content: "\e138"
  568. }
  569.  
  570. .glyphicon-briefcase:before {
  571. 	content: "\e139"
  572. }
  573.  
  574. .glyphicon-fullscreen:before {
  575. 	content: "\e140"
  576. }
  577.  
  578. .glyphicon-dashboard:before {
  579. 	content: "\e141"
  580. }
  581.  
  582. .glyphicon-paperclip:before {
  583. 	content: "\e142"
  584. }
  585.  
  586. .glyphicon-heart-empty:before {
  587. 	content: "\e143"
  588. }
  589.  
  590. .glyphicon-link:before {
  591. 	content: "\e144"
  592. }
  593.  
  594. .glyphicon-phone:before {
  595. 	content: "\e145"
  596. }
  597.  
  598. .glyphicon-pushpin:before {
  599. 	content: "\e146"
  600. }
  601.  
  602. .glyphicon-euro:before {
  603. 	content: "\20ac"   /* 147 */
  604. }
  605.  
  606. .glyphicon-usd:before {
  607. 	content: "\e148"
  608. }
  609.  
  610. .glyphicon-gbp:before {
  611. 	content: "\e149"
  612. }
  613.  
  614. .glyphicon-sort:before {
  615. 	content: "\e150"
  616. }
  617.  
  618. .glyphicon-sort-by-alphabet:before {
  619. 	content: "\e151"
  620. }
  621.  
  622. .glyphicon-sort-by-alphabet-alt:before {
  623. 	content: "\e152"
  624. }
  625.  
  626. .glyphicon-sort-by-order:before {
  627. 	content: "\e153"
  628. }
  629.  
  630. .glyphicon-sort-by-order-alt:before {
  631. 	content: "\e154"
  632. }
  633.  
  634. .glyphicon-sort-by-attributes:before {
  635. 	content: "\e155"
  636. }
  637.  
  638. .glyphicon-sort-by-attributes-alt:before {
  639. 	content: "\e156"
  640. }
  641.  
  642. .glyphicon-unchecked:before {
  643. 	content: "\e157"
  644. }
  645.  
  646. .glyphicon-expand:before {
  647. 	content: "\e158"
  648. }
  649.  
  650. .glyphicon-collapse:before {
  651. 	content: "\e159"
  652. }
  653.  
  654. .glyphicon-collapse-top:before {
  655. 	content: "\e160"
  656. }

css图标的更多相关文章

  1. 一个标签的72变，打造一个纯CSS图标库

    每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

  2. 手把手教你打造一个纯CSS图标库

    来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. ...

  3. css:图标与文字对齐的两种方法

    (好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...

  4. css图标库 font-awesome.min.css

    下载font-awesome-4.4.0 同时引入font-awesome-4.4.0.min.css 通过<i class='fa fa-sign-out'></i>生成图片 ...

  5. CSS图标文字不对齐

    页面排版经常遇到‘图标+文字’的需求,正常样式写下来是这样 ​, 但产品要的应该是长这样 ​,怎么办呢?其实很简单,加个样式看看 vertical-align: top/middle/bottom; ...

  6. css图标与文字对齐实现方法

    1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采 ...

  7. CSS图标与文字对齐的两种方法

    在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向对齐为middle, <div> <img src=&q ...

  8. css 图标 旋转中

    .person-loading .loading-icon{position: absolute;top: 14px;} i.loading-icon{width: 15px;height: 15px ...

  9. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

随机推荐

  1. 最低位 【杭电-HDOJ-1196】 附题

    /* Lowest Bit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  2. DBCP（一）数据源配置文件

    DBCP是Apache开发的数据源API,使用的话需要导入dbcp jar包.collections jar包.pool jar包. 其数据源匹配的配置文件格式如下:   #连接设置 driverCl ...

  3. 转：【Linux】linux系统中find和whereis查找命令常用示例

    转载至:wanqi博客园:http://www.cnblogs.com/wanqieddy/archive/2011/06/09/2076785.html whereis 命令,直接查找需要的文件名称 ...

  4. 发布WebService 1.1

    webservice1.1是基于jdk发布的 package cn.itcast.service01; import javax.jws.WebService; import javax.xml.ws ...

  5. 【LeetCode】94. Binary Tree Inorder Traversal (3 solutions)

    Binary Tree Inorder Traversal Given a binary tree, return the inorder traversal of its nodes' values ...

  6. stm32 堆和栈(stm32 Heap & Stack)

    关于堆和栈已经是程序员的一个月经话题,大部分有是基于os层来聊的. 那么,在赤裸裸的单片机下的堆和栈是什么样的分布呢?以下是网摘: 刚接手STM32时,你只编写一个 int main() { whil ...

  7. django admin 如何去掉s 如何去掉django admin 各个模块后面的s

    其中加上红色标记的内容,业务管理员后面就不会有 s 了 class UsrMngUser(models.Model): user_name = models.CharField("用户名称& ...

  8. vue使用vue-resource,进行网络请求

    首先使用vue-resource,需要安装 : https://blog.csdn.net/qq_36947128/article/details/72832977 下面我写的一个例子: 网络请求应该 ...

  9. 父级和 子集 controller 之间的通讯

    在同个 angular.js 应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式 基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通 ...

  10. Atitit. 最佳实践 QA----降低cpu占有率--cpu占用太高怎么办

    Atitit. 最佳实践 QA----降低cpu占有率--cpu占用太高怎么办 跟个磁盘队列长度雅十,一到李80%走不行兰.... 1. 寻找线程too 多的.关闭... Taskman>> ...