文章: 阅读:

Foundation 图标

CSSFoundation

前言

  • Foundation 提供了 283 个图标，可以使用 CSS 来定义它的样式尺寸。

  • 图标可用于文本，按钮，工具条，导航栏，表单等。

1、语法

  • 创建图标语法格式如下:

    1
    <i class="fi-图标名字"></i>

  • 要使用图标需要在 <head>部分添加图标的样式文件：

    1
    <link href="https://cdn.staticfile.org/foundicons/3.0.0/foundation-icons.css" rel="stylesheet" />

  • 以下演示了使用图标的实例:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <p>Cloud icon: <i class="fi-cloud"></i></p>
    <p>Cloud icon as a link: <a href="#"><i class="fi-cloud"></i></a></p>
    <p>Styled Cloud icon: <i class="fi-cloud" style="font-size:35px;color:red;"></i></p>

    <p>Home icon: <i class="fi-home"></i></p>
    <p>Home icon on a button:
        <button type="button" class="button">
            <i class="fi-home"></i> Home
        </button>
    </p>
    <p>Home icon on a green button:
        <button type="button" class="button success">
            <i class="fi-home"></i> Home
        </button>
    </p>
    <p>Home icon on a large, light blue link button:
        <a href="#" class="button info large">
            <i class="fi-home"></i> Home
        </a>
    </p>

  • 效果 🔗

2、工具条图标

  • 可以使用 .icon-bar 类来创建一个指定数量的工具栏图标。图标描述使用 <label> 元素。.disabled 类可以让图标变成不可点击状态：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="icon-bar five-up">
        <a href="#" class="item">
            <i class="fi-home"></i>
            <label>Home</label>
        </a>
        <a href="#" class="item">
            <i class="fi-share"></i>
            <label>Share</label>
        </a>
        <a href="#" class="item">
            <i class="fi-info"></i>
            <label>Info</label>
        </a>
        <a href="#" class="item disabled">
            <i class="fi-mail"></i>
            <label>Mail</label>
        </a>
        <a href="#" class="item">
            <i class="fi-magnifying-glass"></i>
            <label>Search</label>
        </a>
    </div>

  • 效果 🔗

2.1 垂直工具栏

  • .vertical 类用于创建一个垂直的工具栏：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <div class="icon-bar vertical five-up">
        <a href="#" class="item">
            <i class="fi-home"></i>
            <label>Home</label>
        </a>
        <a href="#" class="item">
            <i class="fi-share"></i>
            <label>Share</label>
        </a>
        <a href="#" class="item">
            <i class="fi-info"></i>
            <label>Info</label>
        </a>
        <a href="#" class="item disabled">
            <i class="fi-mail"></i>
            <label>Mail</label>
        </a>
        <a href="#" class="item">
            <i class="fi-magnifying-glass"></i>
            <label>Search</label>
        </a>
    </div>

  • 效果 🔗

3、图标列表

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:07


评论


文章目录
  1. 1. 前言
  2. 2. 1、语法
  3. 3. 2、工具条图标
    1. 3.1. 2.1 垂直工具栏
  4. 4. 3、图标列表
隐藏目录