How to use Font Awesome in you Design?
This post is about how we can use the Font Awesome in our design. Now a day the technology get change. If you want any training video we do not know how we can implement it.
This post will help you in that case.
If you want to use the Font-Awesome here is the simple Example.
1. Fist thing that you need is to include the BootstrapCDN for FontAwesome in the <head> tag of you HTML page i.e.
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
</head>
After that the FontAwesome CDN will start working on you HTML page.
Then you need to add the element to your HTML page, where you want to display the FontAwesome on your page.
For Example we used here the <p1></p1> to display the FontAwesome on our HTML page. <p1></p1> is the elements. We can also use <element></element> or anything text you want.
Then you can display it with your CSS, for example here if the elements are <p1></p1> then by CSS we can display it by following CSS come.
.p1 {
position: relative;
}
/*replace the content value with the
corresponding value from the list below*/
.p1:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
In my case you can use it like that
By this way the Font Awesome will work correctly.
p1 {
position:relative;
}
p1:before {
font-family:FontAwesome;
content: "\f009";
text-align:center;
font-size:100px;
display:block;
}
By this way the Font Awesome will work correctly.
0 comments:
Post a Comment