(内容来自菜鸟教程,本博客为笔记)
国内推荐CDN

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

使用fa前缀来放置Font Awesome
设置class为fa fa-car可以设置汽车图标
通过style设置图标大小和颜色
font-size设置大小
color设置颜色

列表图标
设置类为fa-li fa
外加第三个类为fa-check-square 为黑色打钩框框
外加第三个类为fa-spinner fa-spin 为动态黑色转圈圈
外加fa-square 为黑色实心正方形

动态图标
设置类fa-spin可以让图标旋转
设置类fa-pulse 让图标以8步为周期进行旋转

堆叠图标
<span>的class中添加类fa-stack即可
然后依次键入需要堆叠的图标,越上面语句所产生的图像越在下层
example:
禁止照相

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

效果:

禁止拍照

品牌图标
大全网址:https://www.runoob.com/font-awesome/fontawesome-icons-brand.html
个人喜好图标:
fa fa-android 安卓图标
fa fa-apple 苹果图标
fa fa-edge edge图标
fa fa-deviantart deviantart图标
fa-fa-chrome chrome图标
fa fa-facebook 脸书图标
fa fa-facebook-official 脸书官方图标
fa fa-free-code-camp freecodecamp图标
fa fa-git git图标
fa fa-github github图标
fa fa-google 谷歌图标
fa fa-html5 HTML5图标
fa fa-internet-explorer IE图标
fa fa-qq QQ图标
fa fa-safari safari图标
fa fa-share-alt 分享图标
fa fa-steam steam图标
fa fa-twitter 推特图标
fa fa-usb usb图标
fa fa-wechat 微信图标
fa fa-weibo 微博图标
fa fa-wikipedia-w 维基百科图标
fa fa-windows 微软图标
fa fa-youtube-play 油管图标

货币图标
https://www.runoob.com/font-awesome/fontawesome-icons-currency.html
fa fa-rmb人民币
fa fa-eur欧元
fa fa-usd美元

方向图标
https://www.runoob.com/font-awesome/fontawesome-icons-directional.html

表单图标
fa fa-check-square 黑框框里面一个√

手势图标
fa fa-thumbs-down 一个向下的大拇指(可以代表踩)
fa fa-thumbs-up 一个向上的大拇指(可以代表赞)
fa fa-thumbs-o-down 白色的赞
fa fa-thumbs-o-up 白色的踩

付款图标
https://www.runoob.com/font-awesome/fontawesome-icons-payment.html

加载图标
https://www.runoob.com/font-awesome/fontawesome-icons-spinner.html

Font Awesome参考手册
https://www.runoob.com/font-awesome/fontawesome-reference.html

总结:是一个很好的图标库,可以有效地帮助我们改善某些小组件的设计

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议