The Bootstrap bundles more than 200 font-style glyphs. First, let's take a look at what a font icon is.
What is a font icon?Font icons are the font of icons used in WEB projects. Although Glyphicons Halflings requires a commercial license, you can use these icons for free through the project-based Bootstrap.
Get font iconWe have downloaded the Bootstrap 3.x version in the Environment Installation section and understood its directory structure. The font icon can be found within the Fonts folder, which contains the following files:
The relevant CSS rules are written on the bootstrap.css and bootstrap-min.css files in the CSS folder within the Dist folder.
List of font iconsClick here to view a list of available font icons.
CSS Rules explainedThe following CSS rules form the Glyphicon class.
@font-face { font-family: ' glyphicons halflings '; Src:url ('.. /fonts/glyphicons-halflings-regular.eot '); Src:url ('.. /fonts/glyphicons-halflings-regular.eot? #iefix ') format (' Embedded-opentype '), url (' ... /fonts/glyphicons-halflings-regular.woff ') format (' Woff '), url ('.. /fonts/glyphicons-halflings-regular.ttf ') format (' TrueType '), url ('.. /fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular ') format (' SVG ');}. Glyphicon { position:relative; top:1px; Display:inline-block; font-family: ' glyphicons halflings '; -webkit-font-smoothing:antialiased; Font-style:normal; Font-weight:normal; line-height:1; -moz-osx-font-smoothing:grayscale;}So the font-face rule is actually found in the Glyphicons Place declaration font-family and position.
The . Glyphicon class declares a relative position that offsets 1px from the top, renders as Inline-block, declares a font, prescribes Font-style and font-weight to normal, and sets the row height to 1. In addition, use -webkit-font-smoothing:antialiased and -moz-osx-font-smoothing:grayscale to get cross-browser consistency.
And then, here's the
. glyphicon:empty { width:1em;}is empty Glyphicon.
There are 200 classes, each of which has an icon for each class. The common formats for these classes are as follows:
. glyphicon-keyword:before { content: "Hexvalue";}For example, using the user icon, its class is as follows:
. glyphicon-user:before { content: "\e008";}To use the icon, simply use the following code. Please keep the appropriate space between the icon and the text.
<spanClass="Glyphicon glyphicon-search"></span>
The following example shows how to use the font icon:
<! DOCTYPE html> <title>Bootstrap instance-How to use the font icon</title> <link Href="/bootstrap/css/bootstrap.min.css" Rel="Stylesheet"> <script Src="/scripts/jquery.min.js"></script> <script Src="/bootstrap/js/bootstrap.min.js"></script><body><p> <button Type="Button" Class="Btn Btn-default"> <span Class="Glyphicon glyphicon-sort-by-attributes"></span> </button> <button Type="Button" Class="Btn Btn-default"> <span Class="Glyphicon Glyphicon-sort-by-attributes-alt"></span> </button> <button Type="Button" Class="Btn Btn-default"> <span Class="Glyphicon Glyphicon-sort-by-order"></span> </button> <button Type="Button" Class="Btn Btn-default"> <span Class="Glyphicon Glyphicon-sort-by-order-alt"></span> </button></p><button Type="Button" Class="Btn Btn-default Btn-lg"> <span Class="Glyphicon Glyphicon-user"></span>User</button><button Type="Button" Class="Btn Btn-default btn-sm"> <span class= "Glyphicon Glyphicon-user" > </span> User</button>< Button type= "button" Span class= "ATN" >class= "btn btn-default btn-xs" > <span class= "Glyphicon Glyphicon-user" ></span> user </button></body></HTML>
The results are as follows:
Custom font iconsWe've seen how to use the font icon, and then we'll look at how to customize the font icon.
We'll start with the example above and customize the icon by changing font size, color, and applying text shading.
Here's the starting code:
<button type= "button" class= "btn btn-primary btn-lg" > <span class= "Glyphicon glyphicon-user" ></ Span> user</button>
The effect is as follows:
Custom Font SizeBy increasing or decreasing the font size of the icons, you can make the icons look larger or smaller.
<button type= "button" class= "btn btn-primary btn-lg" style= "font-size:60px" > <span class= "Glyphicon Glyphicon-user "></span> user</button>
customizing font colors
Apply Text Shadow<button type= "button" class= "btn btn-primary btn-lg" style= "Color:rgb (212, 106, 64);" > <span class= "Glyphicon glyphicon-user" ></span> user</button>
<button type= "button" class= "btn btn-primary btn-lg" style= "Text-shadow:black 5px 3px 3px;" > <span class= "Glyphicon glyphicon-user" ></span> user</button>
Bootstrap font icon (glyphicons)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
