字体图标的下载及使用

图标字体引用

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">&#xf1b0;</span>

2、IconFont

下载

打开官网iconfont

选择想要的图标加入购物车

添加完后打购物车，添加至项目（没登录的需要登录，没注册的需要注册）

添加到项目后下载到本地，就可以引入到项目中使用了（如果是商业用途，请联系作者了解版权问题）

用法

将文件中除了demo.css和demo_index.html的其他文件复制到项目中，在代码中引入iconfont.css文件

1、通过类名使用字体图标

2、通过伪元设置字体图标

3、通过实体设置字体图标

用法跟font awesome一样。可在文件夹demo_index.html文件查看使用方法