Bootstrap -- component Glyphicons font icon and glyphicons icon

Bootstrap -- component Glyphicons font icon and glyphicons icon
All available icons of the Glyphicons font icon

Including over 250 font icons from Glyphicon Halflings. Glyphicons Halflings is generally charged, but their authors allow free use of Bootstrap

Next let's take a look at some icons

The method is also very simple.

For performance considerations, all icons require a base class and a class corresponding to each icon. Put the following code in any place for normal use. Note: To set correct inner padding, you must add a space between the icon and the text.

Do not mix with other components

The icon class cannot be used together with other components. They cannot exist together with other classes on the same element. Create a nested<span>Label, and apply the icon class to this<span>Label.

It takes effect only for elements with blank content

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

Change the icon Font File Location

Bootstrap assumes that all the icon font files are located in../fonts/Directory, relative to the pre-compiled CSS file directory. If you have modified the position of the icon font file, you need to update the CSS file in any of the following ways:

• Modify in the Less source code file@icon-font-pathAnd/or@icon-font-nameVariable.
• Use the relative URL options provided by the Less compiler.
• Modifyurl()Address.

Select a method based on your own situation.

Icon accessibility

Modern auxiliary technologies can recognize and read the content generated by CSS and specific Unicode characters. To prevent the screen reader from capturing unintentional and potentially confusing output content (especially when icons are purely for decorative purposes), we setaria-hidden="true"Attribute.

If you use icons to express some meanings (not just for decoration), make sure that the meaning you want to express can be identified by the secondary device. For example, include additional content and.sr-onlyClass to display the hidden effect visually.

If the component you created does not contain any text content (for example,<button>Contains only one icon), you should provide other content to express the intent of the control, so that users who use the auxiliary device can know its role. In this case, you can addaria-label.

<Span class = "icon class" aria-hidden = "true"> </span>, the icon class is an English letter under the icon.

If you want to change the icon to another color, just write a css style.

A problem encountered when using icons on your own: the icon is used, but an error occurs in the browser debugging window. Generally, this icon is not found in the fonts directory, but the fonts directory is downloaded from the website, the icons are displayed normally without any changes. However, the icons are sometimes loaded slowly and cannot be displayed. If you have any reasons, please inform us.