前言
在项目中,往往会使用到小图标,我们可以直接使用UI给的图,但是这样多次改变图标的颜色好像有点麻烦。
笔者习惯使用阿里提供的矢量图,用什么图标就直接选择并添加什么图标,可以直接通过css里面的color和font-size来改变其颜色和大小。
另外,font awesome也是不错的选择,同样可以轻松改变图标的颜色和字体大小,还有其他特色的功能,本文主要介绍font awesome的使用方法。
在站点中引入Fontawesome字体
1、下载font awesome官网,点击DownLoad下载 资源文,官网地址:http://fontawesome.dashgame.com/
2、解压源文件,源文件如下图。将CSS(样式文件),fonts(字体)将两个文件夹拷贝到站点中。
![](https://img.haomeiwen.com/i19541867/ec811856de91c5ee.png)
3、注意,在使用的时候,css文件夹和fonts文件夹必须为同一级别,直接将css里面的font-awesome文件引入到html文件中就可以使用,不需要处理fonts文件夹。
4、在HMTL文件中,引入CSS(发布使用min(压缩版本),调试可以使用未压缩的) ,如:
![](https://img.haomeiwen.com/i19541867/2dc28b3f156e4dcb.png)
使用教程
使用教程详见font-awesome官网,再此不做赘述
http://fontawesome.dashgame.com/
网友评论