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

举报
lxw1844912514 发表于 2022/03/27 03:29:02 2022/03/27
【摘要】 标签: 字体图标iconfontawesom Font web开发(17) 版权声明:本文为博主原创文章,未经博主允许不得转载。 目录(?)[+] 本文主...



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

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

目录(?)[+]

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

如何在站点中引入Fontawesome字体

  1. Footawesome官网,点击DownLoad下载 资源文件。
  2. 解压源文件,源文件如下图。将CSS(样式文件),fonts(字体)将两个文件夹拷贝到站点中。

    font-awesome源文件

  3. 在HMTL文件中,引入CSS(发布使用min(压缩版本),调试可以使用未压缩的) ,如:
    引入CSS


    
  1. <<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 代表了相应的图标类,如: 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-*: 两个参数来控制水平和垂直

例如:


    
  1. fa-rotate-90
  2. fa-rotate-180
  3. fa-rotate-360
  4. fa-flip-horizontal
  5. 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最新版完整使用教程

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100027301

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。