网页设计 订阅所有【网页设计】的日志

Font Awesome图标字体库使用示例

编辑:dnawo 日期:2019-11-18

字体大小: 小 中 大
Font Awesome 是一套图标字体库，它提供了大量的用于WEB项目的可缩放矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。



Font Awesome图标字体库使用示例

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Font Awesome演示</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--引入Font Awesome-->
        <link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet">
    </head>

    <body>
        <!-- 基本图标(fa+图标名称) -->
        <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-3x"></i>

        <!-- 旋转与翻转(fa-rotate-*、 fa-flip-*) -->
        <i class="fa fa-arrow-up fa-rotate-90"></i>
        <i class="fa fa-arrow-up fa-rotate-270"></i>
        <i class="fa fa-arrow-up fa-flip-horizontal"></i>
        <i class="fa fa-arrow-up fa-flip-vertical"></i>

        <!-- 动画(fa-spin、fa-pulse) -->
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>

        <!-- 组合使用(fa-stack作为父容器、fa-inverse切换颜色) -->
        <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
    </body>
</html>



相关链接

[1].Font Awesome中文网：http://www.fontawesome.com.cn/
[2].Font Awesome图标库：http://www.fontawesome.com.cn/faicons/
[3].Font Awesome案例：http://www.fontawesome.com.cn/examples/

上一篇: 以双斜杠//开头的URL的含义
下一篇: 简单易懂四种拖车结打法图解
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 2606
发表评论
请登录后再发表评论！