1. 全栈程序员必看首页

Fontawesome字体使用说明及其常用效果语法

全栈程序员-站长 • • 未分类 • 阅读 74

Fontawesome字体使用说明及其常用效果语法


Font web开发
（17）
Fontawesome字体使用说明及其常用效果语法

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录(?)[+]

本文主要介绍如何在我们的站点里引入Footawesome字体，并且介绍一些Fontawesome字体常用的一些使用方法。
下面是整理的一下使用心得。

如何在站点中引入Fontawesome字体

  1. Footawesome官网，点击DownLoad下载 资源文件。

  2. 解压源文件，源文件如下图。将CSS（样式文件），fonts（字体）将两个文件夹拷贝到站点中。

    font-awesome源文件

  3. 在HMTL文件中，引入CSS(发布使用min（压缩版本），调试可以使用未压缩的） ，如：
    引入CSS

    
    <<span class="hljs-title">link rel="stylesheet" href="css/font-awesome.min.css">
  • 1
  • 2

这样我们便可以在UI中，使用Foot-awesome图标了。

footawesome使用实例

下面的实例是引用 crper大神写的demo，在这儿借用此实例做一个常用用法的介绍。

基础用法

在标签中，使用 css类 fa fa- ,此处icon 代表了相应的图标类，如： icon-wixin //微信图标

font-awesome基础用法

图标的规格

icon图标的大小是 由字体大小决定的，也就说我们通过font-size来控制icon图标的大小，font-awesome也提供了对应的规格类大小，更适用。

fa-lg比常规图标大33%,而2x~5x都是常规图标大小的倍数（fa-2x,fa-3x）

图标规格

图标固定大小

使用 fa-fw类

图标边框及图标移动

  • pull-left : 控制图标在占据左侧
  • pull-right ： 控制图标占据右侧

  • fa-border : 图标边框

    图标边框及图标移动

图标动画

下面的知识点厉害了，想不想不通过JS，就让图标动起来？ font-awesome就可以实现，仅仅一个css类，就可以让我们的图标动起来。

下面介绍两个css类：

fa-spin ：
spin的速度是linear(匀速),一圈2s
fa-fa-pulse ：
pulse分为八步(图标分8次转完一圈),一圈时间1S

图标动画

图标动画实例：

   <<span class="hljs-title">div class="icon-test-list">
      <<span class="hljs-title">h1>图标动画</<span class="hljs-title">h1>
      <<span class="hljs-title">ul>
        <<span class="hljs-title">li><<span class="hljs-title">i class="fa fa-spin fa-2x  fa-arrow-right"></<span class="hljs-title">i> fa-arrow-right-匀速旋转,2s一圈</<span class="hljs-title">li>
        <<span class="hljs-title">li><<span class="hljs-title">i class="fa fa-spin fa-2x fa-spinner fa-pulse"></<span class="hljs-title">i>fa-spinner--一圈分为八次转完,时间1S</<span class="hljs-title">li>
      </<span class="hljs-title">ul>
    </<span class="hljs-title">div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

图标旋转

图标旋转

fa-rotate-*:来控制旋转的度数
fa-flip-*: 两个参数来控制水平和垂直

例如：



fa-rotate-90
fa-rotate-180
fa-rotate-360


fa-flip-horizontal
fa-flip-vertical
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

图标堆叠 ，图标合并

最让人吃惊的是这一个了，图标竟然还能凑在一起，如下图：都是拼接起来的，突然就想起小时候玩过的那些“七巧板”，“魔尺”之类的玩具。

图标的合并

使用语法：

要多添加一个 fa-stack类，而后以此加上要堆叠的图标

fa-stack作为父,组合子元素生成的对象;可以使用规格参数
fa-stack-2x 作为背景的栈,要大于显示图形的栈
fa-stack-1x 作为背景栈内部的内容,所以要小于背景栈
fa-inverse 用来反转图标颜色,生成可见图标组

使用实例

<<span class="hljs-title">li>
  <<span class="hljs-title">span class="fa-stack fa-3x">
     <<span class="hljs-title">i class="fa fa-stack-1x   fa-chain"></<span class="hljs-title">i>
     <<span class="hljs-title">i class="fa fa-stack-2x  fa-circle-o "></<span class="hljs-title">i>
   </<span class="hljs-title">span>随便找的两个图标合成
 </<span class="hljs-title">li>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

以上实例代码，引用网上博文，详情见： 引用参考

引用参考

Font-Awesome最新版完整使用教程

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/113876.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 前端工程配置Nginx反向代理[通俗易懂]

    前端工程配置Nginx反向代理[通俗易懂]

    前端工程配置Nginx反向代理HTTP配置HTTPS配置配置两个反向代理，一个代理http页面，一个代理https页面，前者监听80端口，后者监听443端口。配置后整个文件如下，其中有不少冗余，挑有用的看即可。#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月11日
    45
  • 程序员成才的关键——内在兴趣和善于发现

    程序员成才的关键——内在兴趣和善于发现

    程序员成才的关键——内在兴趣和善于发现

    全栈程序员-站长的头像 全栈程序员-站长
    2021年8月29日
    50
  • <span>DATETIME类型和BIGINT 类型互相转换</span>

    DATETIME类型和BIGINT 类型互相转换

    DATETIME类型和BIGINT 类型互相转换

    全栈程序员-站长的头像 全栈程序员-站长
    2021年11月26日
    42
  • 云服务器和虚拟主机的区别

    云服务器和虚拟主机的区别

    云服务器和虚拟主机的区别云服务器和虚拟主机的区别：1、技术原理：云服务器是基于庞大的服务器资源池，是在一组集群主机上虚拟出多个类似独立主机的部分，集群中每个主机上都有云服务器的一个镜像；虚拟主机是服务器划分出的一部分，因此也叫做虚拟空间，在服务器当中划分出一定的磁盘空间放置web程序组件，提供数据的存放和传输功能。2、可用资源：云服务器是独享资源，具有独立的CPU、内存、硬盘和ip等；虚拟主机则是众多网站空间共享一台物理服务器的资源。3、主机费用：由于虚拟主机是多个空间分享一台服务器的带宽、IP等资源，费用低廉，价格比云服

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月25日
    32
  • 数据库-第一范式、第二范式、第三范式、BC范式、第四范式简析

    数据库-第一范式、第二范式、第三范式、BC范式、第四范式简析

    数据库-第一范式、第二范式、第三范式、BC范式、第四范式简析在设计与操作维护数据库时，最关键的问题就是要确保数据能够正确地分布到数据库的表中。使用正确的数据结构，不仅有助于对数据库进行相应的存取操作，还可以极大地简化应用程序中的其他内容(查询、窗体、报表、代码等)，按照“数据库规范化”对表进行设计，其目的就是减少数据库中的数据冗余，以增加数据的一致性。泛化时在识别数据库中的一个数据元素、关系以及定义所需的表和各表中的项目这些初始工作之后的一个细

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月24日
    34
  • Zencart模板结构和设计详解[通俗易懂]

    Zencart模板结构和设计详解[通俗易懂]

    Zencart模板结构和设计详解[通俗易懂]
    ZenCart的设计很简单，和其他HTML页面是一样的。只是整个页面分成了几个部分，并加入了PHP代码。
    通常分为页眉(header)，页脚(footer)，边框(sideboxes)。页面通过CSS样式表来控制，样式表控制了包括表格单元的背景图案、字体颜色和样式等等，所以假如你需要修改边框标题栏的字体，那么就去查看样式表文件。
    ZenCart在页面添加图像有两种方式。可以使用图像目录的相对路径，或者在模板中用php变量定义图像。如果你使用https服

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月27日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号