图标字体引用
文章目录
1、Font Awesome
下载
打开官网fontawesome
我这里选择免费版点击下载
下载解压后,将里面的css文件夹和webfonts文件夹移到项目中
注:这两个文件夹必须在同一级目录
再引入css文件夹里的all.css或all.min.css
用法
1、通过类名来使用字体图标,类名对应的图标可到官网或百度搜索
<span class="fas fa-bell"></span>
<span class="fab fa-accessible-icon"></span>
2、通过伪元素设置字体图标
/*
1、在content中设置字体图标的编码,字体图标的编码可从官方上看,或者百度搜索。
2、设置字体样式
fab类的图标
font-family: 'Font Awesome 5 Brands'
font-weight: 400;
fas类的图标
font-family: 'Font Awesome 5 Free';
font-weight: 900;
*/
li{
list-style: none;
}
li::before{
content: '\f1b0';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
3、通过实体使用字体图标,&#x加上字体图标的编码
<span class="fas"></span>
2、IconFont
下载
打开官网iconfont
选择想要的图标加入购物车
添加完后打购物车,添加至项目(没登录的需要登录,没注册的需要注册)
添加到项目后下载到本地,就可以引入到项目中使用了(如果是商业用途,请联系作者了解版权问题)
用法
将文件中除了demo.css和demo_index.html的其他文件复制到项目中,在代码中引入iconfont.css文件
1、通过类名使用字体图标
2、通过伪元设置字体图标
3、通过实体设置字体图标
用法跟font awesome一样。可在文件夹demo_index.html文件查看使用方法