Font Awesome图标字体使用

最新推荐文章于 2024-07-14 09:41:15 发布

3s_bigdata

最新推荐文章于 2024-07-14 09:41:15 发布

阅读量1.1k

点赞数

分类专栏： bootstrap 文章标签： Font Awesome

本文链接：https://blog.csdn.net/yangzhai/article/details/60756652

版权

2 篇文章 0 订阅

订阅专栏

将Font Awesome 集成到 Bootstrap 非常容易，还可以被单独使用。

使用这种方式将 Font Awesome 集成到默认的 Bootstrap CSS中。

在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。

     
     <link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">

修改Bootstrap的LESS文件以集成 Font Awesome。

拷贝 Font Awesome 字体目录到你的项目中。
拷贝 font-awesome.less 文件到 bootstrap/less 目录。
打开 bootstrap.less 文件，并将 @import "sprites.less"; 替换为 @import "font-awesome.less";
打开你的项目中的 font-awesome.less 文件，并编辑 @FontAwesomePath 变量，将其值替换为指向字体文件的正确路径。
```
     
     @FontAwesomePath:   "../font";
```
字体路径相对于存放编译之后的CSS文件的目录。
重新编译Bootstrap的所有 LESS 文件。如果你使用的是less.js脚本动态编译的话就能直接在浏览器中看到效果了。
在浏览器中打开页面，检查是否正确启用了 Font Awesome!

我也从未使用过SASS或SCSS，如果源码包中的SCSS或SASS文件有问题的话请通知我。

Font Awesome works just as well without Twitter Bootstrap.

Copy the Font Awesome font directory into your project.
Copy font-awesome.less or font-awesome.min.css into your project.
Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).
Check out the examples to start using Font Awesome!

具体请参考：http://www.bootcss.com/p/font-awesome/