How to use Font Awesome in you Design - Nano Blogs Online

Nano Blogs Online

Nano Blogs Online provides free help in Web Technologies, Affiliate Marketing, Social Media Marketing, Digital Marketing, and reviews different products from the online world.

How to use Font Awesome in you Design

How to use Font Awesome in you Design

Share This

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
 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.

No comments:

Post a Comment