一. 准备工作
登录阿里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"></i>
同样的标签可以随意双标签, 但是类名需加上iconfont, 内容直接写对应字体图标的unicode值. 该值可以去iconfont.css /demo.html/阿里主页项目库直接查找
3.3 伪元素调用
HTML
<div class="iconfont car">购物车</div>
CSS
.car::before {
content: "\e63b";
}
.car::after {
content: "\e686";