Font Awesome图标字体库的使用

发布时间:2019-04-05 23:03:22 来源:腾巢网络

Font Awesome是一套应用于前端开发的图标字体,能和Bootstrap搭配使用。通过CSS样式可改变图标的颜色、大小阴影等效果,在不同终端屏幕上完美呈现。Font Awesome是完全免费的,无论是个人还是商业组织均可自由使用。

Font Awesome图标字体库的使用

使用前先下载Font Awesome图标字体库,下载网址:http://www.bootcss.com/p/font-awesome,这里面是Font Awesome 3.0版本,如果要使用最新版本可以到Font Awesome 中文网一下载。

复制Font Awesome的CSS文件和字体放到指定的项目目录中;

在<head>闭合标签内使用link 加载font-awesome.min.css,如:

<link href="font/css/font-awesome.css" rel="stylesheet" type="text/css">

在前端页面中使用时,都是通过简短的标签<i>添加class属于,设置css前缀和图标字体的具体名称。

<i class="fa fa-camera-retro"></i>

使用 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x可改变图标大小相对于它们的容器。

<i class="fa fa-camera-retro fa-2x"></i>

使用 fa-fw 来设置图标在一个固定宽度内,主要用于不同宽度图标无法对齐的情况,尤其在列表或导航时起到重要作用。

<i class="fa fa-home fa-fw" aria-hidden="true"></i>

使用 fa-ul and fa-li 轻松的替换无序列表中的默认图标。

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>使用列表类图标</li>
  <li><i class="fa-li fa fa-check-square"></i>轻松的替换</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>无序列表</li>
  <li><i class="fa-li fa fa-square"></i>中的默认图标</li>
</ul>

使用 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>

最新资讯

  1. 2019年乌镇大会,也说说互联网
  2. 响应式网站建设需要准备多少开发预算
  3. CMSJIA介绍
  4. 遵义信息技术服务、WEB软件开发公司
  5. 建设公司网站的作用体现
  6. 品牌保护中域名、商标同等重要
  7. 网站建设哪家公司好
  8. 建设开发手机网站的优势及作用
  9. 我们研究了100个小程序,得出了这些经验!
  10. 公司定制开发网站建设的优势
  11. 移动互联网建站:遵义做网站建设那家公司好
  12. 贵州腾巢网络成功入驻熊掌号,再现移动互联时代新域名