--- layout: default title: 常用 slug: index lead: "把常用的抽出来放在首页方便阅读,如颜色,图标" ---

颜色选择

彩色

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

字体图标

未分类

箭头与方向

增删改

编辑器

提示

时间

列表

用户

社交网络

记账

文件库

今天

社区

如何使用

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

不要和其他组件混合使用

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

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

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

改变图标字体文件的位置

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

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

{% highlight html %} {% endhighlight %}

实例

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

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