下载Font Awesome框架
2024-09-08 17:03:52
一:下载Font Awesome框架
绝佳的图标字体库与CSS框架
官方网址:http://www.fontawesome.com.cn/
1.下载稳定版本旧版4.7
2.将font awesome下载好的文件压缩然后移动到当前pycharm文档中
3.将Font-Awesome的CSS标签添加到Pycharm当前使用文档中,在添加到自定义模板中,方便以后使用,不在频繁创建。
<!--Font-Awesome引入 CSS-->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
二:如何使用font awesome
1.使用图标等样式,点击复制标签即可,需要嵌套在i标签内
2.点击图标,复制标签,然后粘贴使用即可。
蓝牙图标
蓝牙<i class="fa fa-bluetooth-b" aria-hidden="true"></i>
导航条
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> 首页</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> 关于我们</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> 后台应用编辑</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> 系统设置</a>
</div>
3.动态图片等
用fa-cog来作为加载动画图标用fa-spinner来作为加载动画图标
使用 fa-spin
使任意图标旋转,还可以使用 fa-pulse
使其进行8方位旋转。尤其适合 fa-spinner
, fa-refresh
, 和 fa-cog
。
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
最新文章
- cookie小析
- HDU 5053 the Sum of Cube(简单数论)
- Android 获取全部应用
- php扩展mssql.so连接sqlserver2008
- Oracle 基础 <;2>; --函数
- DataGridView 添加ComboBox
- JAVA线程池简介
- VB操作Excel
- Android(java)学习笔记246:ContentProvider使用之学习ContentProvider(内容提供者)的目的
- js 深拷贝和浅拷贝
- unity渲染路径
- Codeforces962F Simple Cycles Edges 【双连通分量】【dfs树】
- 基于netty的一款http server
- vscode eslint配置vue遇到的问题
- 在 CentOS7 上安装 Zookeeper服务
- RN与webview通讯
- 【代码审计】XIAOCMS_存在任意文件删除漏洞分析
- IOS HTTP访问端口
- A - ACM Computer Factory(网络流)
- 【Jmeter】配置不同业务请求比例,应对综合场景压测
热门文章
- nginx+gunicorn部署Django项目
- InetAddress.getLocalHost() 执行很慢?
- 洛谷P4408 [NOI2003] 逃学的小孩 (树的直径)
- MySQL之安装(linux两种版本版本安装)
- MyBatis的各种查询功能
- Map中定义的方法:
- JPA入门学习集合springboot(一)
- Vue学习之--------Vue中过滤器(filters)的使用(代码实现)(2022/7/18)
- Java并发编程 | Synchronized原理与使用
- 浅入浅出 1.7和1.8的 HashMap