http://www.thinkcmf.com/font/icons/
The first time using the Font Awesome found quite cool! Its icons are full and can help you save time looking for pictures. Let's study together below:
1: Go to the official website to download the decompression http://fontawesome.io/
2: Unzip and copy to your project and then introduce to your file as follows:
?
1 |
< link rel = "stylesheet" type = "text/css" href = "font-awesome-4.0.3/css/font-awesome.css" /> |
3: Start using:
?
1 |
< a href = "#" class = "fa fa-trash-o fa-1g" ></ a > |
Note: fa is a global must join.
fa-trash-0 is the icon class (equivalent to the name) you need reference address: http://fontawesome.io/icons/.
The fa-1g control size is also used (FA-2X, fa-3x,fa-4x,fa-5x).
Effect:
Code:
?
1234567891011121314151617181920212223242526272829303132 |
<!
DOCTYPE
html>
<
html
>
<
head
>
<
title
>font icons test</
title
>
<
meta
charset
=
"ut-8"
/>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"font-awesome-4.0.3/css/font-awesome.css"
/>
<
style
type
=
"text/css"
>
.danger{
display: inline-block;
width: 80px;
height: 30px;
text-align: center;
background: brown;
border-radius: 5px;
font-size: 14px;
line-height: 30px;
text-decoration: none;
color: white;
}
</
style
>
</
head
>
<
body
>
<!--用法一-->
<
a class
=
"danger"
href
=
"#"
><
i
class
=
"fa fa-trash-o fa-lg"
></
i
>Delete</
a
>
<!--用法二-->
<
i
class
=
"fa fa-trash-o fa-2x"
></
i
> Delete
<
i
class
=
"fa fa-trash-o fa-3x"
></
i
> Delete
<
i
class
=
"fa fa-trash-o fa-4x"
></
i
> Delete
<!--用法三-->
<
a href
=
"#"
class
=
"fa fa-trash-o fa-5x"
></
a
>
</
body
>
</
html
>
|
Use font awesome to replace your website icon (icons icon)