Bordered Icons

There are instances where we need to add borders to Font Awesome Icons, which can be achieved without adding any additional styles.

Font Awesome has provided a class fa-border to add borders to the icons as below.

<i class="fa fa-check fa-border"></i>

Examples

We can check the outcome of the below HTML document to see how it looks.

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

We can simply add an additional predefined class to Font Awesome Icon to add borders to it.

Related Links