最近在写新的主题,将iconfont图标切换为Font Awesome 5的,切换的原因主要是,方便别人二次开发好找图标,下面说一下,这个图标的具体的用法。
css引用
掌握一种即可,需要另外一种的时候在研究,我这里使用的是css的引用,下载后找到 all.css,或者 all.min.css 建议正式环境引用all.mim.css
<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 必须有,否则图标不显示。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。