图标

使用图标字体,在任何地方放置矢量图标。

这个组件使用了FEAIF 图标字体。由于允许你通过CSS简单地改变颜色、尺寸和其他样式,图标字体是很棒的选择。它们是可伸缩的矢量图形,这意味着它们在高分辨率设备上也能很好地显示。

图标字体

示例

这是一个 Javascript 输出 \uf800 的图标字符。
这是一个由  字符输出的图标
这是一个由  字符输出的图标

代码

<span class="feaif">
    <script type='text/javascript'>
        document.write('\uf800');
    </script>
</span>

<span class="feaif">&#xf800;</span>
<span class="feaif">&#63488;</span>

图标类

应用此组件,在任何 <i><span> 元素中添加 icon-* 类即可。瞧,你有了一个矢量图标,它能像文本一样继承了尺寸和色彩。

示例

带有图标的按钮

代码

<i class="icon-fea"></i>

图标尺寸

示例

icon-lg icon-2x icon-3x icon-4x icon-5x

代码

<i class="icon-fea icon-lg"></i>
<i class="icon-fea icon-2x"></i>
<i class="icon-fea icon-3x"></i>
<i class="icon-fea icon-4x"></i>
<i class="icon-fea icon-5x"></i>

调整图标

为图标添加固定的宽度,并将其居中,只需添加 icon-justify 类名。在一个列表中使用不同的图标时是很有帮助的哦。

示例

  • 空白占位符
  • 主页
  • 应用
  • 设置

代码

<ul class="list-unstyled">
    <li><i class="icon-justify"></i> 空白占位符</li>
    <li><i class="icon-home icon-justify"></i> 主页</li>
    <li><i class="icon-book icon-justify"></i> 库</li>
    <li><i class="icon-fea icon-justify"></i> 应用</li>
    <li><i class="icon-gear icon-justify"></i> 设置</li>
</ul>

旋转图标

添加 icon-spin 创建动画的旋转图标。

示例

  • 用于加载内容的旋转图标
  • 用于刷新内容的图标

代码

<i class="icon-spinner icon-spin"></i>
<i class="icon-refresh icon-spin"></i>

文本中的图标

示例

我一路上遇到的阻碍都促使我更加努力地去抗争、去奋斗。然而,如果不是我内心深处坚信我的奋斗有希望,我就根本无法坚持。

代码

<blockquote>
    <p>
        <i class="icon-quote-left icon-2x align-left text-muted"></i> ...
    </p>
</blockquote>

图标角度

示例

  • 正常
  • 旋转 90 度
  • 旋转 180 度
  • 旋转 270 度
  • 水平翻转
  • 垂直翻转

代码

<i class="icon-shield"></i>
<i class="icon-shield icon-rotate-90"></i>
<i class="icon-shield icon-rotate-180"></i>
<i class="icon-shield icon-rotate-270"></i>
<i class="icon-shield icon-flip-horizontal"></i>
<i class="icon-shield icon-flip-vertical"></i>

图标其他

示例

  • 图标堆叠
  • 图标堆叠,并且上层图标反色。
  • 图标堆叠,并且底层图标添加文字状态。

代码

<span class="icon-stack icon-lg">
    <i class="icon-box icon-stack-2x"></i>
    <i class="icon-fea icon-stack-1x"></i>
</span>

<span class="icon-stack icon-lg">
    <i class="icon-square icon-stack-2x"></i>
    <i class="icon-smile-r icon-stack-1x icon-inverse"></i>
</span>

<span class="icon-stack icon-lg">
    <i class="icon-ban icon-stack-2x text-danger"></i>
    <i class="icon-camera-retro icon-stack-1x"></i>
</span>

按钮组中的图标

示例

代码

<div class="btn-toolbar">
    <div class="btn-group">
        <span class="btn"><i class="icon-step-backward"></i></span>
        <span class="btn"><i class="icon-fast-backward"></i></span>
        <span class="btn"><i class="icon-backward"></i></span>
        ...
    </div>
    <div class="btn-group">
        <span class="btn"><i class="icon-adjust"></i></span>
        <span class="btn"><i class="icon-equalizer"></i></span>
        ...
    </div>
</div>

图标总览

标识 字符从 &#xf000 开始


icon-round

icon-cycle

icon-square

icon-box

icon-ok

icon-cannel

icon-plus

icon-minus

icon-info

icon-question

icon-exclam

icon-ok-r

icon-cannel-r

icon-plus-r

icon-minus-r

icon-info-r

icon-question-r

icon-exclam-r

icon-warning

icon-ok-c

icon-cannel-c

icon-plus-c

icon-minus-c

icon-info-c

icon-question-c

icon-exclam-c

icon-ban

icon-dot-c

icon-ok-s

icon-cannel-s

icon-plus-s

icon-minus-s

icon-ok-b

icon-cannel-b

icon-plus-b

icon-minus-b

icon-chevron-up

icon-chevron-down

icon-chevron-left

icon-chevron-right

icon-chevron-up-r

icon-chevron-down-r

icon-chevron-left-r

icon-chevron-right-r

icon-angle-up

icon-angle-down

icon-angle-left

icon-angle-right

icon-angle-double-up

icon-angle-double-down

icon-angle-double-left

icon-angle-double-right

icon-caret-up

icon-caret-down

icon-caret-left

icon-caret-right

icon-arrow-up

icon-arrow-down

icon-arrow-left

icon-arrow-right

icon-arrow-up-r

icon-arrow-down-r

icon-arrow-left-r

icon-arrow-right-r

icon-arrow-long-up

icon-arrow-long-down

icon-arrow-long-left

icon-arrow-long-right

icon-arrow-up-c

icon-arrow-down-c

icon-arrow-left-c

icon-arrow-right-c

icon-arrows

icon-arrows-h

icon-arrows-v

icon-arrows-alt

icon-arrows-converge

icon-arrows-obulique-up

icon-arrows-obulique-down

icon-expand

icon-compress

icon-exchange

icon-exchange-v

icon-swap

icon-retweet

icon-level-up

icon-level-down

icon-refresh

icon-rotate-cw

icon-rotate-acw

icon-history

icon-forwarding

icon-reply

icon-forwarding-s

icon-reply-s

icon-forwarding-b

icon-reply-b

icon-sort

icon-sort-asc

icon-sort-desc

icon-sort-alpha-asc

icon-sort-alpha-desc

icon-sort-numeric-asc

icon-sort-numeric-desc

icon-sort-amount-asc

icon-sort-amount-desc

播放控制 字符从 &#xf100 开始


icon-step-backward

icon-fast-backward

icon-backward

icon-play

icon-pause

icon-stop

icon-forward

icon-fast-forward

icon-step-forward

icon-eject

icon-volume-off

icon-volume-down

icon-volume

icon-volume-up

icon-adjust

icon-equalizer

icon-play-r

icon-pause-r

icon-stop-r

icon-play-c

icon-pause-c

icon-stop-c

货币符号 字符从 &#xf200 开始


icon-money

icon-credit-card

icon-yen

icon-dollar

icon-euro

icon-pound

icon-rouble

icon-won

icon-lira

icon-sheqel

icon-rupee

icon-bitcoin

表情 字符从 &#xf300 开始


icon-interest

icon-bored

icon-disgust

icon-pain

icon-angry

icon-shy

icon-worry

icon-smile

icon-sad

icon-awkward

icon-interest-r

icon-bored-r

icon-disgust-r

icon-pain-r

icon-angry-r

icon-shy-r

icon-worry-r

icon-smile-r

icon-sad-r

icon-awkward-r

系统 字符从 &#xf400 开始


icon-keyboard

icon-desktop

icon-laptop

icon-tablet

icon-mobile-phone

icon-printer

icon-fax

icon-webcam

icon-headphone

icon-mic

icon-mic-off

icon-hdd

icon-cd

icon-sd-card

icon-micro-sd-card

icon-camera

icon-camera-retro

icon-camcorder

icon-gamepad

icon-phone

icon-home

icon-folder

icon-folder-open

icon-file

icon-briefcase

icon-envelope

icon-folder-o

icon-folder-open-o

icon-file-o

icon-briefcase-o

icon-envelope-o

icon-music

icon-film

icon-picture

icon-code

icon-paperclip

icon-file-text

icon-file-pdf

icon-file-doc

icon-file-xls

icon-file-ppt

icon-file-image

icon-file-audio

icon-file-video

icon-file-zip

icon-file-code

icon-save

icon-cut

icon-copy

icon-paste

icon-pencil

icon-eraser

icon-trash

icon-lock

icon-unlock

icon-key

icon-link

icon-unlink

icon-share

icon-eye

icon-eye-close

icon-zoom

icon-zoom-in

icon-zoom-out

icon-hand

icon-hand-o

icon-hand-hold

icon-hand-hold-o

icon-corp

icon-filter

icon-lifebuoy

icon-bug

icon-ellipsis

icon-ellipsis-v

icon-spinner

icon-gear

icon-terminal

icon-terminal-window

icon-calendar

icon-clock

icon-power

icon-signal

icon-wifi

icon-gps

icon-dashboard

icon-user

icon-user-group

icon-sign-in

icon-sign-out

网页应用 字符从 &#xf500 开始


icon-area-chart

icon-bar-chart

icon-line-chart

icon-pie-chart

icon-direction

icon-map-marker

icon-bullseye

icon-qrcode

icon-barcode

icon-rss

icon-lightning

icon-bulb

icon-globe

icon-pushpin

icon-car

icon-truck

icon-beaker

icon-wrench

icon-trophy

icon-medal

icon-certificate

icon-cart

icon-tag

icon-tags

icon-rokect

icon-plane

icon-umbrella

icon-puzzle

icon-shield

icon-compass

icon-ticket

icon-book

icon-wheelchair

icon-recycle

icon-tree

icon-database

icon-cloud

icon-cloud-arrow-up

icon-cloud-arrow-down

icon-cloud-o

icon-cloud-arrow-up-o

icon-cloud-arrow-down-o

icon-sitemap

icon-quote-left

icon-quote-right

icon-sun

icon-sun-o

icon-moon

icon-moon-o

icon-star

icon-star-o

icon-star-half

icon-star-half-o

icon-heart

icon-heart-o

icon-bookmark

icon-bookmark-o

icon-flag

icon-flag-o

icon-thumb-up

icon-thumb-up-o

icon-thumb-down

icon-thumb-down-o

icon-send

icon-send-o

icon-leaf

icon-leaf-o

icon-comment

icon-comment-o

icon-comments

icon-comments-o

icon-pencil-s

icon-pencil-b

icon-external-link-s

icon-external-link

icon-th-large

icon-th

icon-th-list

icon-bars

icon-water

icon-fire

品牌 字符从 &#xf800 开始


icon-asthis

icon-fea

icon-pfa

icon-uwa

icon-loga

icon-html5

icon-css3

icon-php

icon-apple

icon-win

icon-android

icon-linux

icon-qq

icon-wechat

icon-weibo

icon-yixin

icon-taobao

icon-qzone

icon-pengyou

icon-kaixin

icon-douban

icon-tqq

icon-renren

icon-facebook

icon-twitter

icon-alipay

icon-wechatpay

icon-unionpay

icon-paypal

icon-tenpay