ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

下载Font Awesome框架

2022-02-17 01:04:46  阅读:243  来源: 互联网

标签:... Loading 框架 标签 Awesome fa nbsp Font 图标


目录

一:下载Font Awesome框架

绝佳的图标字体库与CSS框架

官方网址:http://www.fontawesome.com.cn/

1.下载稳定版本旧版4.7

image

2.将font awesome下载好的文件压缩然后移动到当前pycharm文档中

image

3.将Font-Awesome的CSS标签添加到Pycharm当前使用文档中,在添加到自定义模板中,方便以后使用,不在频繁创建。

<!--Font-Awesome引入 CSS-->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

image

二:如何使用font awesome

1.使用图标等样式,点击复制标签即可,需要嵌套在i标签内

image

2.点击图标,复制标签,然后粘贴使用即可。

image

image

蓝牙图标
蓝牙<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>&nbsp; 首页</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
</div>

image

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>

image

image

标签:...,Loading,框架,标签,Awesome,fa,nbsp,Font,图标
来源: https://www.cnblogs.com/goOJBK/p/15902916.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有