Still working hard to cut the sprite diagram, still using position carefully to display the small icon on the sprite chart one by one, Bootstrap provides us with more than 200 kinds of commonly used font graphics, which greatly reduces the above mentioned work.
Bootstrap 3.x and above support font graphics, Glyphicons provides us with a variety of common icons. Referring to http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm, you will see a variety of icons as follows:
Now let's talk about how to use it.
1. First of all, the introduction of script files.
and ensure the project can find glyphicion related files, these files in the/bootstrap-3.3.7/fonts/directory.<link rel= "stylesheet" href= ". /libs/bootstrap-3.3.7/css/bootstrap.css ">
2. Use.
You can use it in the button, or you can use the so-called font graphics in span, he allows us to use him like a font, to give him style, to wrap it with a label, and here we use the span tag directly.
<!doctype html>The effect is as follows:As you can see in the code, add the class= "Glyphicon glyphicon-apple" style attribute to a span tag to get the font icon Apple.
Where. Glyphyicon is a declaration of icon position, font and line high, and glyphicon-apple is the specific icon style specified for use.
3. Change the icon color and size.Like a font, we can also change the color and size of the icons, and we can also add shadows to the icons.
<div class= "Container" style= "margin-top:20px" > <span class= "Glyphicon glyphicon-apple" > apple-default</span> <span class= "Glyphicon glyphicon-apple" style= "font-size:20px" >apple-20px </span> <span class= "Glyphicon glyphicon-music" style= "font-size:20px;color:red" >music-20px-red </span> <span class= "Glyphicon glyphicon-asterisk" style= "Font-size:20px;color:red;text-shadow: #122b40 2px 2px 2px ">asterisk-20px-red-shadow</span> </div>
The effect is as follows:As you can see in the code, changing the color of the font icon, applying a shadow to the size, is the same as manipulating the font.
Use font-size to size the table, color to change colors, Text-shadow to add shadows.
Font icons can be used in other places, such as navigation bar icons, button icons, etc., depending on the needs of the project.
Article reference from: http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
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
