bootstrap的字体图标怎么引入？

bootstrap引用图标的方法：\x0d\x0a1、下载包并解压\x0d\x0a在‘elegant_font’文件夹中会发现“HTML CSS”子文件夹，把它复制到你的项目中（注意，这里可以重命名哦）\x0d\x0a2、将连接添加到‘style.css’，html里添加一个图标，内容如下：\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a可以在你HTML里添加图标，并且使用CSS来更改它们的样式：\x0d\x0a

bootstrap 中包含的文件有

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png

在你的web目录下面必须要有

└── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png

才能使用bootstrap 中的图标

使用的时候

<i class="icon-glass"></i>

这样就可以。详细的icon列表你可以去bootstrap的官网上面看。

Twitter Bootstrap 真是前端开发的瑞士军刀，作为基于 HTML，CSS 和JavaScript 的简洁灵活的前端框架及交互模块集合，让我这样的半吊子 PHPer 都能很轻松地写出一张还算漂亮的页面来。干净整洁有木有！小清新有木有！Web 后端都逆袭了有木有！

Bootstrap 默认自带了由 Glyphicons 提供的 140 个灰/白图标，很好看，然而，很不够用啊！无法满足项目饥渴的需求啊！连个电话的图标都没有，哥曾经在推上@这套图标的作者，过了大概 5 个月这哥们 回复我 说那个 phone icon 做好了。。。

FamFamFam Silk Icon 是一套免费的图标，它包含了 1000 多个精美的彩色的 icons（全部图标一览）。如果能用 Bootstrap 的方式来调用这些图标，使用到我们的项目中，肯定能把需求全部满足了。

一、下载 FamFamFam 图标

下载：点击下载

二、合并雪碧图

并不是所有的 1000 多枚图标我们都用得上，为了减小图片大小，我们从下载的图标中挑出我们需要的，然后进行 Sprite 在线合并。

1. 打开这个网站

2. 选择你要合并的图标准备上传

3. 修改以下配置

Build Direction: Horizontal

Horizontal Offset: 5px

Vertical Offset: 5px

CSS Prefix: cus-

4. 提交上传

大约 30 秒后，我们就能得到合并后的雪碧图，以及相关 CSS 代码了。

...

cus-world{ background-position: 0 0width: 16pxheight: 16px}

cus-world_add{ background-position: 0 -21pxwidth: 16pxheight: 16px}

cus-world_delete{ background-position: 0 -42pxwidth: 16pxheight: 16px}

cus-world_edit{ background-position: 0 -63pxwidth: 16pxheight: 16px}

cus-world_go{ background-position: 0 -84pxwidth: 16pxheight: 16px}

cus-world_link{ background-position: 0 -105pxwidth: 16pxheight: 16px}

cus-wrench{ background-position: 0 -126pxwidth: 16pxheight: 16px}

cus-wrench_orange{ background-position: 0 -147pxwidth: 16pxheight: 16px}

...

保存上面的雪碧图 famfamfam-icons.png，以及 cus-icons.css

三、与 Bootstrap 整合使用

默认情况下，在 bootstrap 中我们以 icon-xxx 的形式来使用图标。现在，我们以 cus-xxx 来调用自定义的图标。只需要在 cus-icons.css 里加上下面几段：

/* icons */

[class^="cus-"],

[class*=" cus-"] {

display: inline-block

width: 17px

height: 16px

*margin-right: .3em

line-height: 14px

vertical-align: text-top

background-image: url("icons/famfamfam-icons.png")

background-position: 14px 14px

background-repeat: no-repeat

}

[class^="cus-"]:last-child,

[class*=" cus-"]:last-child {

*margin-left: 0

}

/* icons code below */

.cus-accept{ background-position: 0 0 }

.cus-add{ background-position: -21px 0 }

.cus-anchor{ background-position: -42px 0 }

.cus-application{ background-position: -63px 0 }

......

......

......

大功告成！

---