Search code examples
htmlcssiconsfont-awesomefont-awesome-5

Can't use any Fontawesome icon with "-o" ending

For a website I want to use icons from fontawesome. For example I need to use the heart icon:

works:

<i class="fa fa-heart" aria-hidden="true"></i>

The icon is available as filled version or only the outline, and I only need the "outline" version of the icon. To get the outline version you just change the corresponding CSS class by adding "-o" like this:

doesn't work:

<i class="fa fa-heart-o" aria-hidden="true"></i>

But the "-o" version just is not displayed. There are many icons declared on the fontawesome website where one can add "-o" to show only the outline. But none of them is displayed on when I try it. The normal icons work. I also did a search for a "-o" declaration in all downloaded CSS files but didn't find anything! Like they didn't implement it..

I can't find the problem. Seems to me like they "forgot" to implement the "-o" versions in the latest Fontawesome 5.0.4 file.

PS: I added the icons to my project by downloading the CSS file "fontawesome-all.min.css". Use this link to search for icons, e.g. "heart".

Like requested, my whole code:

<!DOCTYPE html>
<head>
    <link href="http://127.0.0.1:8000/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="http://127.0.0.1:8000/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
        <div class="col-md-12">

            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Some Title</h6>

                    <!-- Stats -->
                    <p class="card-text font-weight-light">
                        <span class="mr-4"><i class="fa fa-comment" aria-hidden="true"></i>0</span>
                        <span class="mr-4"><i class="fa fa-heart" aria-hidden="true"></i>0</span>
                        <span><i class="fa fa-star" aria-hidden="true"></i>0</span>
                    </p>
                </div>
            </div>   
        </div>        
        </div>
    </div>

    <!-- Scripts -->
    <script src="http://127.0.0.1:8000/js/jquery-3.2.1.min.js"></script>
    <script src="http://127.0.0.1:8000/js/bootstrap.min.js"></script>

</body>
</html>
Solution

  • TL;DR

    use: <i class="far fa-heart" aria-hidden></i>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>

<!-- Regular/outline (-o) -->
<i class="far fa-heart" aria-hidden></I>

<!-- Solid/filled -->
<i class="fas fa-heart" aria-hidden></i>

    Explanation:

    Since Font Awesome Version 5 severall things changed.

    Changes (not all):

    • fa has changed to far (font awesome regular)
    • all -o icons have been integrated in the regular style and left of the -o

    Here is the upgrade guide from v4 to v5

    Website: