[转]glyphicons-halflings-regular字体 图标

本文转自：http://www.ijquery.cn/?p=377

 

一、介绍

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

二、使用原因

今天在用到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代码粘贴下边

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

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

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

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

三、完整版下载及使用

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