Edit This Code:
See Result »
<!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"> </head> <body> <h3><strong>Stacked icons:</strong></h3> <span class="fa-stack"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-circle-thin<br> <span class="fa-stack"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> fa-twitter (inverse) on fa-circle<br> <span class="fa-stack"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i> </span> fa-ban on fa-camera <h3>Use of large icon class on parent element (fa-lg):</h3> <span class="fa-stack fa-lg"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-circle-thin<br> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> fa-twitter (inverse) on fa-circle<br> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i> </span> fa-ban on fa-camera <h3>Use of larger icon class on parent element (fa-3x):</h3> <span class="fa-stack fa-3x"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span> fa-twitter on fa-circle-thin<br> <span class="fa-stack fa-3x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> fa-twitter (inverse) on fa-circle<br> <span class="fa-stack fa-3x"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i> </span> fa-ban on fa-camera </body> </html>
Result: