专业编程基础技术教程

网站首页 > 基础教程 正文

Font Awesome 5 页面引入和使用方法

ccvgpt 2024-11-07 09:48:41 基础教程 9 ℃

最近在写新的主题,将iconfont图标切换为Font Awesome 5的,切换的原因主要是,方便别人二次开发好找图标,下面说一下,这个图标的具体的用法。

css引用

掌握一种即可,需要另外一种的时候在研究,我这里使用的是css的引用,下载后找到 all.css,或者 all.min.css 建议正式环境引用all.mim.css

Font Awesome 5 页面引入和使用方法

<link rel="stylesheet" href="all.min.css">

使用方法

在需要用图标的地方加入 <i class=”fas fa-camera”></i> 即可,当然也可以用 em

支持调整大小

<i class="fas fa-camera fa-xs"></i>

<i class="fas fa-camera fa-sm"></i>

<i class="fas fa-camera fa-lg"></i>

<i class="fas fa-camera fa-2x"></i>

<i class="fas fa-camera fa-3x"></i>

<i class="fas fa-camera fa-5x"></i>

<i class="fas fa-camera fa-7x"></i>

<i class="fas fa-camera fa-10x"></i>

伪类的使用

好多时候需要使用伪类 ::before 和 ::after,这个时候使用图标需要用下面的方法

a:before {

font-family: "Font Awesome 5 Free";

content: "\f095";

display: inline-block;

padding-right: 3px;

vertical-align: middle;

font-weight: 900;

}

特别注意的是 font-weight:900 必须要有,否则图标不能显示。

Tags:

最近发表
标签列表