Font Awesome V4 - Bordered Icons Example

Using Font Awesome Icons within a web page is super easy

  • Include the icon library CDN within the head section of a document
  • Then access the icons using their predefined classes from the library

Here is the example that explains how to define Font Awesome Icons with borders (or simply bordered icons) using the predefined class fa-border.

Run this on IDE

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>    
    <h1>Icon Borders</h1>
    <i class="fa fa-check fa-3x fa-border"></i>
    <i class="fa fa-quote-left fa-3x fa-border"></i>
    <i class="fa fa-quote-right fa-3x fa-border"></i>
</body>
</html>

Overall

This example helps us understand how to create Font Awesome Bordered Icons.

Related Links