zoukankan      html  css  js  c++  java
  • 【字体图标】 Font Awesome字体图标如何使用?

    一、Font Awesome官网

    http://www.fontawesome.com.cn/

    二、Font Awesome字体图标使用方式

    就目前知道,有三种方式如下

    需要注意的是:使用这种第三方图标,需要引入它们的样式:<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    1. 使用预编译class样式

    2. 使用Unicode编码

    3. 使用css样式

    2-0、在线测试

    https://www.runoob.com/try/try.php?filename=tryicons_fa-ambulance

    2-1、预编译class样式

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <
    i class="fa fa-ambulance"></i> <i class="fa fa-ambulance" style="font-size:24px"></i> <i class="fa fa-ambulance" style="font-size:36px"></i> <i class="fa fa-ambulance" style="font-size:48px;color:red"></i>

     2-2、Unicode编码

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <p>Unicode:</p>
    <i style="font-size:24px" class="fa">&#xf0f9</i>

     2-3、css样式

    当 Font Awesome图标默认表现样式不能满足需求的时候,我们可以自定义图标的表现形式;简单来说自定义预编译的css样式去表现字体图标。

    字体图标在CSS样式中是如此表示“f0f9”,即“fa-ambulance” ;

    在css中我们通常通过伪类":before",":after"来表示它。

    自定义预编译样式

    <style>
        .hr.star-bright:after, hr.star-dark:after{
            content:'f075';
            font-family:FontAwesome;
            font-size:2em;
            display:inline-block;
            position:relative;
            top:-.8em;
            padding:0 .25em;
        }
    </style>

    应用测试

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <i style="font-size:24px" class="hr star-bright"></i>

    总结

     Font Awesome表现形式如下三种

    1. css样式“fa-ambulance” ->  unicode编码“&#xf0f9”  ->  “content代码:f0f9”

    2. content代码的“”与Unicode编码的“&#x”是一样的

    3. 在官网我们可以查看到字体图标的预编译样式和Unicode编码, 详情参考

      http://www.fontawesome.com.cn/cheatsheet/

      https://fontawesome.com/cheatsheet?from=io

     4. 参考文章:

     https://blog.csdn.net/laurel_y/article/details/70842157

     https://www.ivcxw.com/news/details/5/10.html

     https://blog.csdn.net/qq_44403367/article/details/105256831

     https://www.webuc.cn/w/soft/FontAwesome/4268.html

     https://www.jianshu.com/p/a6ac4ff6d0bc

  • 相关阅读:
    第四次作业—四则运算
    第四次作业—代码规范
    【欢迎来怼】事后诸葛亮会议
    软件工程——第七次作业
    第17次Scrum会议(10/29)【欢迎来怼】
    软件工程——第六次作业
    第10次Scrum会议(10/22)【欢迎来怼】
    软件工程——第五次作业
    欢迎来怼——第四次Scrum会议
    软件工程——第四次作业(3)
  • 原文地址:https://www.cnblogs.com/xzp-blog/p/13809218.html
Copyright © 2011-2022 走看看