Glyphicons font icon for the bootstrap--component

Glyphicons all available icons for font icons

includes more than 250 font icons from the Glyphicon halflings. glyphicons halflings are generally chargeable, but their authors allow Bootstrap to use it for free

Here's a look at some of the icons

The method used is also very simple

For performance reasons, all icons require a base class and a class that corresponds to each icon. Put the following code anywhere you can use it normally. Note that in order to set the correct inner fill (padding), be sure to add a space between the icon and the text.

do not mix with other components

The icon class cannot be used in conjunction with other components directly. They cannot exist with other classes on the same element. You should create a nested <span> label and apply the icon class to the <span> label.

works only on elements that have empty content

An icon class can only be applied to elements that do not contain any text content or child elements.

Change the location of the icon font file

Bootstrap assumes that all icon font files are located in the ../fonts/ directory, relative to the precompiled version of the CSS file's directory. If you change the location of the icon font file, you need to update the CSS file in any of the following ways:

• Modify @icon-font-path and/or variables in the less source file @icon-font-name .
• using the less compiler to provide relative URL address options .
• Modifies the address in the precompiled CSS file url() .

Choose a method based on your own situation.

Accessibility of icons

Modern assistive technologies can identify and read content generated by CSS and specific Unicode characters. To prevent the screen reader from fetching unintentional and potentially confusing output (especially when the icons are purely for decorative purposes), we set the properties for these icons aria-hidden="true" .

If you use an icon to express some meaning (not just for decorating purposes), make sure that the meaning you want to express is recognized by the assistive device, for example, by including additional content and by using a .sr-only class to visually show hidden effects.

If you create a component that does not contain any textual content (for example, it <button> contains only one icon), you should provide additional content to represent the intent of the control, so that users who use the assistive device will know what it does. In this case, you can add zodiac to the control aria-label .

<span class="图标的类" aria-hidden="true"></span>，图标的类就是图标下面的英文字母

还有如果想让图标变成其他颜色的话，自己写个css样式就好

own use of the icon encountered problems: is the use of the icon, but in the Browser debugging window will be wrong, roughly in the fonts directory does not have this icon, but the fonts directory is the site download, no changes, the icon is normal display, nothing wrong, but sometimes the icon will load slowly, Sometimes it is not shown, please inform the small partner who knows the reason.

Glyphicons font icon for the bootstrap--component