字体图标的使用
无论用哪种方法,咋们首先都得引入文件
如何使用字体图标呢 首先咋们要先了解到一个东西。这个东西就是字体图标库!!!
https://www.iconfont.cn/
字体图标有四种引入方式!!!
无论何种引入方式,都要先下载本地字体包。
引入css <link rel="stylesheet" href="./fonts/iconfont.css">
线上地址生成以后,引入地址即可
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">
重点:生成的线上地址没有http://,所以必须自己手动添加,否则不会生效哦!
引入完成后,就可以使用以下的方法添加字体图标了!
1、使用类名进行引入
如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)
<span class="iconfont icon-daohangdizhi"></span>
2、使用unicode编码(了解了解)
可以直接在标签内部放入一个编码
html标签
<strong>  </strong>
css 要指定当前标签的文字是字体图标,必须要声明。
strong {
font-family: 'iconfont';
}
3、使用伪元素字体图标(要着重记忆)
<div class="car1">购物车</div>
结构比较的清晰,可以省很多的小盒子
.car {
width: 200px;
height: 45px;
border: 1px solid pink;
text-align: center;
line-height: 45px;
font-family: 'iconfont';
}
.car::before {
content: "\e63b";
}
.car::after {
content: "\e686";
}
注意: 使用伪元素字体图标,一定要声明字体。 font-family: "iconfont"
4、使用vue框架引入
使用全局引入到APP.vue里
<style>
//这里引入
@import "assets/icon/iconfont.css";
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #666;
}
</style>
然后在页面上添加一个i标签 class填入iconfont icon-xxx即可,
如<i class="iconfont icon-username"></i>