字体图标

时间：2019-09-21 22:39:06 阅读：115 评论：0 收藏：0 [点我收藏+]

1.阿里巴巴矢量图标使用

（1）在阿里巴巴矢量图标官网 https://www.iconfont.cn/ 搜索所需要的图标。

（2）点击添加到购物车（添加入库）

（3）到我的购物车，点击下载代码。

（4）解压后，将.css .eot .svg .ttf .woff .woff2文件保存到一个新建文件夹fonts中。

（5）将iconfont.css文件引入到html中。

<link rel="stylesheet" href="./fonts/iconfont.css">

（6）在需要添加图标处添加span标签

span标签中必须添加两个类名，一个是固定的类名 iconfont ，一个是所搜索到的图标的类名

打开iconfont.css文件，在文档下方可见，例如

.icon-weixin:before {

content: "\e695";

}

<span class=" iconfont icon-weixin"></span>

（7）修改图标的css样式,样式选择器的权重要大于iconfont.css中的权重

.iconfont.icon-weixin

{

font-size: 50px;

color: green;

}

2.使用Font Awesome 字体图标库

（1）在Font Awesome官网http://fontawesome.dashgame.com/下载Font Awesome.zip文件包

（2）解压后，将css和fonts文件夹保存到一个新建文件夹fa中。

（3）将fontawe-some.css文件引入到html中。

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

（4）在需要添加图标处添加span标签

span标签中必须添加两个类名，一个是固定的类名fa ，一个是所需要添加图标的类名（在Font Awesome官网首页查找，查找的图标类名前加上fa-）

<span class="fa fa-flag"></span>

（5）修改图标的css样式,样式选择器的权重要大于fontawe-some.css中的权重

.fa.fa-flag{
    font-size: 50px;
    color: red
}

原文：https://www.cnblogs.com/zhaodz/p/11564601.html

踩

(0)

评论一句话评论（0）

分享档案

更多>