一、介绍

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

二、使用原因

今天在用到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》  

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

font-face.css 可以点击这里进行下载。

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

三、完整版下载及使用

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

HTML代码：

	 
     
      
        
    
 
     001、
      
     002、
      
     003、
      
     004、
      
     005、
      
     006、
      
     007、
      
     008、
      
     009、
      
     010、
      
     011、
      
     012、
      
     013、
      
     014、
      
     015、
      
     016、
      
     017、
      
     018、
      
     019、
      
     020、
      
     021、
      
     022、
      
     023、
      
     024、
      
     025、
      
     026、
      
     027、
      
     028、
      
     029、
      
     030、
      
     031、
      
     032、
      
     033、
      
     034、
      
     035、
      
     036、
      
     037、
      
     038、
      
     039、
      
     040、
      
     041、
      
     042、
      
     043、
      
     044、
      
     045、
      
     046、
      
     047、
      
     048、
      
     049、
      
     050、
      
     051、
      
     052、
      
     053、
      
     054、
      
     055、
      
     056、
      
     057、
      
     058、
      
     059、
      
     060、
      
     061、
      
     062、
      
     063、
      
     064、
      
     065、
      
     066、
      
     067、
      
     068、
      
     069、
      
     070、
      
     071、
      
     072、
      
     073、
      
     074、
      
     075、
      
     076、
      
     077、
      
     078、
      
     079、
      
     080、
      
     081、
      
     082、
      
     083、
      
     084、
      
     085、
      
     086、
      
     087、
      
     088、
      
     089、
      
     090、
      
     091、
      
     092、
      
     093、
      
     094、
      
     095、
      
     096、
      
     097、
      
     098、
      
      
     099、
      
      
     100、
      
      
     101、
      
     102、
      
     103、
      
     104、
      
     105、
      
     106、
      
     107、
      
     108、
      
     100、
      
     110、
      
     111、
      
     112、
      
     113、
      
     114、
      
     115、
      
     116、
      
     117、
      
     118、
      
     119、
      
     120、
      
     121、
      
     122、
      
     123、
      
     124、
      
     125、
      
     126、
      
     127、
      
     128、
      
     129、
      
     130、
      
     131、
      
     132、
      
     133、
      
     134、
      
     135、
      
     136、
      
     137、
      
     138、
      
     139、
      
     140、
      
     141、
      
     142、
      
     143、
      
     144、
      
     145、
      
     146、
      
     147、
      
     148、
      
     149、
      
     150、
      
     151、
      
     152、
      
     153、
      
     154、
      
     155、
      
     156、
      
     157、
      
     158、
      
     159、
      
     160、
      
    
  

CSS代码：

 

@font-face {
       font-family:'Glyphicons Halflings'; src:url('../fonts/glyphicons-halflings-regular.eot'); /* IE9 Compat Modes */ src:url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),/* IE6-IE8 */ url('../fonts/glyphicons-halflings-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),/* Safari, Android, iOS */ url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); /* Legacy iOS */ } .glyphicon:before { font-family: 'Glyphicons Halflings'; font-style: normal; -webkit-font-smoothing: antialiased } .glyphicon-glass:before { content: "\e001" } .glyphicon-music:before { content: "\e002" } .glyphicon-search:before { content: "\e003" } .glyphicon-envelope:before { content: "\2709" } .glyphicon-heart:before { content: "\e005" } .glyphicon-star:before { content: "\e006" } .glyphicon-star-empty:before { content: "\e007" } .glyphicon-user:before { content: "\e008" } .glyphicon-film:before { content: "\e009" } .glyphicon-th-large:before { content: "\e010"; } .glyphicon-th:before { content: "\e011" } .glyphicon-th-list:before { content: "\e012" } .glyphicon-ok:before { content: "\e013" } .glyphicon-remove:before { content: "\e014" } .glyphicon-zoom-in:before { content: "\e015" } .glyphicon-zoom-out:before { content: "\e016" } .glyphicon-off:before { content: "\e017" } .glyphicon-signal:before { content: "\e018" } .glyphicon-cog:before { content: "\e019" } .glyphicon-trash:before { content: "\e020" } .glyphicon-home:before { content: "\e021" } .glyphicon-file:before { content: "\e022" } .glyphicon-time:before { content: "\e023" } .glyphicon-road:before { content: "\e024" } .glyphicon-download-alt:before { content: "\e025" } .glyphicon-download:before { content: "\e026" } .glyphicon-upload:before { content: "\e027" } .glyphicon-inbox:before { content: "\e028" } .glyphicon-play-circle:before { content: "\e029" } .glyphicon-repeat:before { content: "\e030" } .glyphicon-refresh:before { content: "\e031" } .glyphicon-list-alt:before { content: "\e032" } .glyphicon-lock:before { content: "\e033" } .glyphicon-flag:before { content: "\e034" } .glyphicon-headphones:before { content: "\e035" } .glyphicon-volume-off:before { content: "\e036" } .glyphicon-volume-down:before { content: "\e037" } .glyphicon-volume-up:before { content: "\e038" } .glyphicon-qrcode:before { content: "\e039" } .glyphicon-barcode:before { content: "\e040" } .glyphicon-tag:before { content: "\e041" } .glyphicon-tags:before { content: "\e042" } .glyphicon-book:before { content: "\e043" } .glyphicon-bookmark:before { content: "\e044" } .glyphicon-print:before { content: "\e045" } .glyphicon-camera:before { content: "\e046" } .glyphicon-font:before { content: "\e047" } .glyphicon-bold:before { content: "\e048" } .glyphicon-italic:before { content: "\e049" } .glyphicon-text-height:before { content: "\e050" } .glyphicon-text-width:before { content: "\e051" } .glyphicon-align-left:before { content: "\e052" } .glyphicon-align-center:before { content: "\e053" } .glyphicon-align-right:before { content: "\e054" } .glyphicon-align-justify:before { content: "\e055" } .glyphicon-list:before { content: "\e056" } .glyphicon-indent-left:before { content: "\e057" } .glyphicon-indent-right:before { content: "\e058" } .glyphicon-facetime-video:before { content: "\e059" } .glyphicon-picture:before { content: "\e060" } .glyphicon-pencil:before { content: "\270f" /*这个有些特殊*/ } .glyphicon-map-marker:before { content: "\e062" } .glyphicon-adjust:before { content: "\e063" } .glyphicon-tint:before { content: "\e064" } .glyphicon-edit:before { content: "\e065" } .glyphicon-share:before { content: "\e066" } .glyphicon-check:before { content: "\e067" } .glyphicon-move:before { content: "\e068" } .glyphicon-step-backward:before { content: "\e069" } .glyphicon-fast-backward:before { content: "\e070" } .glyphicon-backward:before { content: "\e071" } .glyphicon-play:before { content: "\e072" } .glyphicon-pause:before { content: "\e073" } .glyphicon-stop:before { content: "\e074" } .glyphicon-forward:before { content: "\e075" } .glyphicon-fast-forward:before { content: "\e076" } .glyphicon-step-forward:before { content: "\e077" } .glyphicon-eject:before { content: "\e078" } .glyphicon-chevron-left:before { content: "\e079" } .glyphicon-chevron-right:before { content: "\e080" } .glyphicon-plus-sign:before { content: "\e081" } .glyphicon-minus-sign:before { content: "\e082" } .glyphicon-remove-sign:before { content: "\e083" } .glyphicon-ok-sign:before { content: "\e084" } .glyphicon-question-sign:before { content: "\e085" } .glyphicon-info-sign:before { content: "\e086" } .glyphicon-screenshot:before { content: "\e087" } .glyphicon-remove-circle:before { content: "\e088" } .glyphicon-ok-circle:before { content: "\e089" } .glyphicon-ban-circle:before { content: "\e090" } .glyphicon-arrow-left:before { content: "\e091" } .glyphicon-arrow-right:before { content: "\e092" } .glyphicon-arrow-up:before { content: "\e093" } .glyphicon-arrow-down:before { content: "\e094" } .glyphicon-share-alt:before { content: "\e095" } .glyphicon-resize-full:before { content: "\e096" } .glyphicon-resize-small:before { content: "\e097" } .glyphicon-plus:before { content: "\002b" /* 98 */ } .glyphicon-minus:before { content: "\2212" /* 99 */ } .glyphicon-asterisk:before { content: "\002a" /* 100 */ } .glyphicon-exclamation-sign:before { content: "\e101" } .glyphicon-gift:before { content: "\e102" } .glyphicon-leaf:before { content: "\e103" } .glyphicon-fire:before { content: "\e104" } .glyphicon-eye-open:before { content: "\e105" } .glyphicon-eye-close:before { content: "\e106" } .glyphicon-warning-sign:before { content: "\e107" } .glyphicon-plane:before { content: "\e108" } .glyphicon-calendar:before { content: "\e109" } .glyphicon-random:before { content: "\e110" } .glyphicon-comment:before { content: "\e111" } .glyphicon-magnet:before { content: "\e112" } .glyphicon-chevron-up:before { content: "\e113" } .glyphicon-chevron-down:before { content: "\e114" } .glyphicon-retweet:before { content: "\e115" } .glyphicon-shopping-cart:before { content: "\e116" } .glyphicon-folder-close:before { content: "\e117" } .glyphicon-folder-open:before { content: "\e118" } .glyphicon-resize-vertical:before { content: "\e119" } .glyphicon-resize-horizontal:before { content: "\e120" } .glyphicon-hdd:before { content: "\e121" } .glyphicon-bullhorn:before { content: "\e122" } .glyphicon-bell:before { content: "\e123" } .glyphicon-certificate:before { content: "\e124" } .glyphicon-thumbs-up:before { content: "\e125" } .glyphicon-thumbs-down:before { content: "\e126" } .glyphicon-hand-right:before { content: "\e127" } .glyphicon-hand-left:before { content: "\e128" } .glyphicon-hand-up:before { content: "\e129" } .glyphicon-hand-down:before { content: "\e130" } .glyphicon-circle-arrow-right:before { content: "\e131" } .glyphicon-circle-arrow-left:before { content: "\e132" } .glyphicon-circle-arrow-up:before { content: "\e133" } .glyphicon-circle-arrow-down:before { content: "\e134" } .glyphicon-globe:before { content: "\e135" } .glyphicon-wrench:before { content: "\e136" } .glyphicon-tasks:before { content: "\e137" } .glyphicon-filter:before { content: "\e138" } .glyphicon-briefcase:before { content: "\e139" } .glyphicon-fullscreen:before { content: "\e140" } .glyphicon-dashboard:before { content: "\e141" } .glyphicon-paperclip:before { content: "\e142" } .glyphicon-heart-empty:before { content: "\e143" } .glyphicon-link:before { content: "\e144" } .glyphicon-phone:before { content: "\e145" } .glyphicon-pushpin:before { content: "\e146" } .glyphicon-euro:before { content: "\20ac" /* 147 */ } .glyphicon-usd:before { content: "\e148" } .glyphicon-gbp:before { content: "\e149" } .glyphicon-sort:before { content: "\e150" } .glyphicon-sort-by-alphabet:before { content: "\e151" } .glyphicon-sort-by-alphabet-alt:before { content: "\e152" } .glyphicon-sort-by-order:before { content: "\e153" } .glyphicon-sort-by-order-alt:before { content: "\e154" } .glyphicon-sort-by-attributes:before { content: "\e155" } .glyphicon-sort-by-attributes-alt:before { content: "\e156" } .glyphicon-unchecked:before { content: "\e157" } .glyphicon-expand:before { content: "\e158" } .glyphicon-collapse:before { content: "\e159" } .glyphicon-collapse-top:before { content: "\e160" }