网站首页 > 基础教程 正文
最近在写新的主题,将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 必须要有,否则图标不能显示。
猜你喜欢
- 2024-11-07 Vue初体验(二) -Vue的基本使用 vue的使用教程
- 2024-11-07 实现一个极具创意的熊猫登录页,眼睛还能动起来!【附代码】
- 2024-11-07 jq图片滑动对比插件twentytwenty jquery 图片左右滚动
- 2024-11-07 在ASP.NET Core Razor页面中使用JQuery Unobtrusive Ajax
- 2024-11-07 IDEA下从零开始搭建SpringBoot工程
- 2024-11-07 Spring Boot+Vue 文件上传,如何携带令牌信息?
- 2024-11-07 jQuery+css3左侧固定导航子菜单展开特效代码
- 2024-11-07 全新web前端开发教程之Jquery Dom操作
- 2024-11-07 带你深度解锁Webpack系列(优化篇)
- 2024-11-07 Vue框架之什么是生命周期钩子? vue3.0生命周期函数
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)