1 Introduction
Font Awesome is a set of icon font library and CSS framework, the main purpose is to use with Bootstrap, you can set the size, color, shadow, etc. through the features provided by CSS
Icon library: http://www.fontawesome.com.cn/faicons/
Official website: https://fontawesome.com/?from=io
Another commonly used icon library is Ali vector icon library https://www.iconfont.cn/
2. Quote
-
Paste the following code into the HTML code section of the web page.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
-
Copy the entire font-awesome folder to the project, referenced by relative path
3. How to use
- First reference the icon library in
- Open the page of the icon library: http://www.fontawesome.com.cn/faicons/
- Find the corresponding icon and click to enter. There are two options: copy icon name and copy source code. You can directly copy the source code and place the icon in any position
- Set icon properties: http://www.fontawesome.com.cn/examples/
4. Case
<div class="icon-bar">
<a href="#" class="active"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
/*引用*/
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar{
width: 100%;
background-color: #ddd;
overflow: auto;
}
/*设置图标的样式*/
a{
width: 20%;
float: left;
text-align: center;
color: white;
font-size: 36px;
padding: 12px 0;
}
a:hover{
background-color: #ccc;
}
.active{
background-color: thistle !important;
}
</style>
</head>
operation result: