下载Font Awesome框架
2022/2/17 6:12:17
本文主要是介绍下载Font Awesome框架,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- 一:下载Font Awesome框架
- 二:如何使用font awesome
- 1.使用图标等样式,点击复制标签即可,需要嵌套在i标签内
- 2.点击图标,复制标签,然后粘贴使用即可。
- 3.动态图片等
一:下载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>
这篇关于下载Font Awesome框架的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-04TiDB 资源管控的对撞测试以及最佳实践架构
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现