关于字体图标,最先学习的是iconfont,后来又使用过icomoon,以前在学习BootStrap的时候,曾经接触过font-awesome,很长时间没用,发现自己很健忘。今天试着在网页中使用font-awesome,最开始居然不显示,后来发现是css引用的不对。于是把font-awesome使用方法稍加整理了一下。
font-awesome官网网址为https://fontawesome.com.cn/,font-awesome目前有v4.7.0、v5.15.4 、v6.4.0三个版本。v4.7.0是旧版,可以通过首页“访问旧版”获得。
目前官网提供的下载有后两个版本,可以点击右上方“免费下载”获得,如图所示。最新版本是v6.4.0,如果是网页前端开发中使用,可以下载“免费版 web”。
使用方法一 :CDN方式
这种方式不需要下载,只需要在网页中引入以下代码(以v6.4.0为例),就可以使用Fontawesome。
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css">
使用方法二:下载到本地使用
1.点击“免费下载”,然后点击“官方下载”,下载“Fontawesome v6.4.0 免费版 web”,下载以后解压缩。
可以通过分类导航查找图标,也可以直接搜索。
2.具体使用方法官网有说明,需要注意以下两点。
(1)在html网页中引入all.min.css文件,不是引入fontawesome.css。官网在文字中写的是引入all.min.css,在代码中写的是引入font-awesome.css,导致我一开始引入fontawesome.css,结果图标不显示。
(2)以箭头为例。点击下箭头,弹出一个窗口,对应了html、React、Vue三种方式,选择需要的方式,点击即可复制图标对应的代码。
<i class="far fa-angle-down" />
注意:“class=far“,下箭头不显示,需改成fa或者fas。
<i class="fa fa-angle-down" />
font-awesome的其他具体使用方法可以参考官网,应该不难,一学就会。