Font Awesome图标字体库使用示例

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/

评论: 0 | 引用: 0 | 查看次数: 2096
发表评论
登录后再发表评论!