阿里iconfont字体图标使用几种方法

一. 准备工作

        登录阿里iconfont网站, 选择图标库, 加入购物车, 添加至项目.

二.引入方式

        2.1 下载至本地, 在对应的html文件中引入下载文件中的css

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

        2.2 直接在iconfont网站生成在线链接, 复制使用link引入, 前面记得加上http:

<link rel="stylesheet" href="http:复制的链接">

三. 使用

3.1 使用类名调用

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

其中span可以替换成<i></i> 或者 <em></em> 其中class中 iconfont是固定用法, 因为iconfont在引入的css中由预置的样式, 第二个为特定类名, 即你要调用的图标类名. 

3.2 使用unicode调用

<i class="iconfont">&#xe66e;</i>

同样的标签可以随意双标签, 但是类名需加上iconfont, 内容直接写对应字体图标的unicode值. 该值可以去iconfont.css /demo.html/阿里主页项目库直接查找

3.3 伪元素调用

HTML
<div class="iconfont car">购物车</div>

CSS
.car::before {
    content: "\e63b";

}
.car::after {
    content: "\e686";