一、Font Awesome官网
http://www.fontawesome.com.cn/
二、Font Awesome字体图标使用方式
就目前知道,有三种方式如下
需要注意的是:使用这种第三方图标,需要引入它们的样式:<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
1. 使用预编译class样式
2. 使用Unicode编码
3. 使用css样式
2-0、在线测试
https://www.runoob.com/try/try.php?filename=tryicons_fa-ambulance
2-1、预编译class样式
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-ambulance"></i> <i class="fa fa-ambulance" style="font-size:24px"></i> <i class="fa fa-ambulance" style="font-size:36px"></i> <i class="fa fa-ambulance" style="font-size:48px;color:red"></i>
2-2、Unicode编码
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <p>Unicode:</p> <i style="font-size:24px" class="fa"></i>
2-3、css样式
当 Font Awesome图标默认表现样式不能满足需求的时候,我们可以自定义图标的表现形式;简单来说自定义预编译的css样式去表现字体图标。
字体图标在CSS样式中是如此表示“f0f9”,即“fa-ambulance” ;
在css中我们通常通过伪类":before",":after"来表示它。
自定义预编译样式
<style> .hr.star-bright:after, hr.star-dark:after{ content:'f075'; font-family:FontAwesome; font-size:2em; display:inline-block; position:relative; top:-.8em; padding:0 .25em; } </style>
应用测试
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"> <i style="font-size:24px" class="hr star-bright"></i>
总结
Font Awesome表现形式如下三种
1. css样式“fa-ambulance” -> unicode编码“” -> “content代码:f0f9”
2. content代码的“”与Unicode编码的“&#x”是一样的
3. 在官网我们可以查看到字体图标的预编译样式和Unicode编码, 详情参考
http://www.fontawesome.com.cn/cheatsheet/
https://fontawesome.com/cheatsheet?from=io
4. 参考文章:
https://blog.csdn.net/laurel_y/article/details/70842157
https://www.ivcxw.com/news/details/5/10.html
https://blog.csdn.net/qq_44403367/article/details/105256831
https://www.webuc.cn/w/soft/FontAwesome/4268.html
https://www.jianshu.com/p/a6ac4ff6d0bc