少网站一般都采用图片图标来给一些按钮、标签、菜单、标题前添加一些好看对应的图标,这样可以让网页显得美观活泼,但美化的同时需要载入图标图片,这会影响网站的速度。而为网站添加图标字体就不会有太大的影响,本站好几周前就使用了这种方法给菜单添加了图标字体,按笔者的理解,这种所谓的图标字体,他们本质是字体,但是会显示成一个图标,就好比我们输入法里面能打出来的特殊符号一样,不过图标字体都是矢量图标。

font icon
为网页添加字体图标,有很多好处,比如说:

  1. 替代了原来的图片图标,缩减了文件大小。
  2. 引用图片次数减少,减少了http请求,提高了网页速度。
  3. 可以用css自由改变图标颜色,大小等属性,很方便。
  4. 缩放屏幕的话,图标还是依旧清晰。

这种字体图标,笔者见过两种:一种是Glyphicons,另一种是Font Awesome,前者对于使用Bootstrap框架的人来说再熟悉不过了,本文下面就来介绍这种字体的使用方法。

Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为了表示感谢,希望你在使用时尽量为 Glyphicons 添加一个友情链接。一般我们使用免费的部分 在数量上已经够用了。

安装方法

1、从Bootstrap官网下载源码,里面含有Glyphicons字体的两个主要文件fonts文件夹css
2、fonts文件夹可以直接复制出来,而css需要从bootstrap.css中找到Glyphicons字体的部分复制出来,如果嫌麻烦可以点击这里下载,JV已经整理打包好了。
3、复制安装包里面的fonts文件夹和css文件至自己网站所使用主题的目录下。

4、引用css文件,方法和引用主题的style.css一样,打开主题的header.php模板,在<head>与</head>之间输入如下代码:

  1. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/Glyphicons.min.css" />

当然,你也可以直接把里面的css直接复制粘贴到主题的style.css中合成一个css。
5、最后就可以调用字体图标了,使用时先参照官网的图标和代码对照页面,然后输入相应的代码即可。举例:

  1. <span class="glyphicon glyphicon-home"></span> 首页

其中的glyphicon glyphicon-home就是home 这个图标的坐标代码,这些代码可以在上面的链接页面找到。

效果还是不错的,赶快试试吧?!