颜色选择

彩色

Light Green

#8BC34A

Yellow

#FFEB3B

Amber

#FFC107

Deep Orange

#FF5722

Green

#259B24

Lime

#CDDC39

Orange

#FF9800

Red

#E51C23

Indigo

#3F51B5

Light Blue

#03A9F4

Cyan

#00BCD4

Pink

#E91E63

Deep Purple

#673AB7

Blue

#5677FC

Teal

#009688

Purple

#9C27B0

Brown

#795548

中性色

Black

#000000

Light Black

#383838

Grey

#808080

Light Grey

#A6A6A6

Lighter Grey

#AAAAAA

字体图标

未分类

  • add-list
  • archive
  • arrange
  • article-stroke
  • audio
  • board
  • board-bold
  • book-bold
  • book
  • building
  • camera
  • camera-stroke
  • caret
  • checkbox
  • checkbox-bold
  • checkbox-checked
  • circle
  • circle-bold
  • crown
  • collection
  • comment
  • comments
  • computer
  • convert
  • copy-task
  • create-post
  • create-tag
  • dig
  • dropbox
  • envelope
  • envelope-bold
  • eye
  • filter
  • gift
  • heart
  • solid-heart
  • home
  • home-bold
  • focus
  • image
  • image-bold
  • pause
  • picture
  • play
  • import-project
  • inbox
  • intro
  • keyboard
  • leave
  • lightning
  • link2
  • location
  • location-stroke
  • lock
  • lock2
  • unlock
  • menu
  • menu-vertical
  • more
  • move
  • move-task
  • off
  • off-stroke
  • order-a
  • order-desc
  • paperclip
  • paperclip-horizontal
  • phone
  • pin
  • pin2
  • project
  • project-bold
  • put-back
  • quit
  • refresh
  • refresh-stroke
  • review
  • scanning
  • search
  • search-file
  • search-warning
  • sharp
  • stage
  • star
  • switch
  • t
  • table
  • tag
  • th
  • th-stroke
  • tick
  • video
  • voice
  • wall
  • wall-bold
  • window-max
  • window-min
  • zoom-in
  • zoom-out

箭头与方向

  • chevron-left
  • circle-left
  • chevron-right
  • circle-right
  • chevron-up
  • arrow-up
  • upload
  • jump
  • chevron-down
  • arrow-down
  • arrow-down-bold
  • download
  • download-stroke

增删改

  • plus
  • plus-bold
  • plus-sign
  • circle-cross
  • triangle-down-bold
  • add-stage
  • add-project
  • remove
  • trash
  • trash-bold
  • trash-stroke
  • pencil
  • cog
  • cog-bold
  • cog-stroke
  • config

编辑器

  • bold
  • italic
  • underline
  • quote
  • heading
  • pre
  • link
  • remove-link
  • at
  • emoji
  • rich-text
  • normal-text

提示

  • circle-check
  • circle-error
  • info
  • info-bold
  • circle-warning
  • circle-warning-intaglio
  • circle-info
  • sys-info
  • question
  • help
  • help-stroke

时间

  • alert-clock
  • ring
  • clock
  • repeat
  • repeat-bold
  • leave-state
  • calendar
  • calendar2
  • calender-stroke
  • calendar-bold

列表

  • ul
  • th-list
  • sub-task
  • ul-bold
  • th-list-bold
  • ol

用户

  • user
  • user-bold
  • user2-bold
  • users
  • users-bold
  • users-stroke
  • add-user
  • add-user-bold
  • add-user-stroke
  • members

社交网络

  • share
  • share-stroke
  • rss
  • qq
  • wechat
  • weibo
  • zhihu
  • douban

记账

  • bookkeeping
  • expense
  • income
  • normal
  • meal
  • sale
  • travel
  • human

文件库

  • folder
  • folder-bold
  • library
  • library-bold
  • file
  • file-bold
  • file-move
  • file-move-bold
  • file-move2
  • upload-file
  • create-folder

今天

  • td-calendar
  • td-calendar-blank
  • td-new-schedule
  • td-arrow-left
  • td-chevron-right
  • td-refresh
  • td-pencil
  • td-pencil2
  • td-quit
  • td-collapse
  • td-spread
  • td-mark-as-read
  • td-ring
  • td-envelope

社区

  • post
  • post-forbidden
  • state-top
  • state-check
  • state-official
  • state-other

如何使用

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于 ./fonts/ 目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：

  • 在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
  • 利用 Less 编译器提供的 相对 URL 地址选项。
  • 修改预编译 CSS 文件中的 url() 地址。

根据你自身的情况选择一种方式即可。

<span class="icon icon-search"></span>

实例

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

<button type="button" class="btn btn-default btn-lg">
  <span class="icon icon-star"></span> Star
</button>