Change font awesome in a class - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Font awesome

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Font awesome

Description

Change font awesome in a class

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum do</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
  <style>
.valid:before {<!--from   ww w . java 2 s.c o  m-->
   content:"\f47";
   font-family:FontAwesome;
}

.invalid:before {
   content:"\f1d";
   font-family:FontAwesome;
}

.warning:before {
   content:"\f72";
   font-family:FontAwesome;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul> 
   <li id="letter" class="invalid">Lorem ipsu<strong>Lorem ipsu</strong> </li> 
   <li id="letter" class="valid">Lorem ipsu<strong>Lorem ipsu</strong> </li> 
   <li id="letter" class="warning">Lorem ip</li> 
  </ul>  
 </body>
</html>

Related Tutorials