Tuesday, August 18, 2015

Font Awesome Icon

                                Using font awesome icons

 These are Icons You can place . anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements 
<i class="fa fa-check-circle"></i> fa-camera-retro
 <!DOCTYPE html>  
 <html>  
 <head>  
   <title></title>  
 </head>  
 <body>  
 <h2>JSON Object Creation in JavaScript</h2>  
 <p id="demo"></p>  
 <script>  
   var text = '{"FirstName":"Prathap","LastName":"Kudupu"}';  
   var obj = JSON.parse(text);  
   document.getElementById("demo").innerHTML =  
     obj.FirstName + "<br>" +  
     obj.LastName + "<br>";  
 </script>  
 </body>  
 </html>  

using font awesome icons
  • Paste the following reference into the <head> section of your site's HTML.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
  • Paste the Icon tag in the html file
<i class="fa fa-check-circle"></i><span>Enrollment submitted</span>

font awesome would be rendered as show below with check box before the span



Advanatages
  •  Help you use a scalable image to use on our website regardless of the size and scaling factors.
  • provide various types of choices that will suit your media  icon needs from video to social media icons

You can find list of font-awesome icons at this line
http://fortawesome.github.io/Font-Awesome/icons/

No comments:

Post a Comment