Problem in implementing awesome font icone by css

Navigation
2

I'm having a problem loading my font via css I'm using font awesome 5 I'm implementing icones via content on css but the icon I want to use is not working that would be the icon link I want to use F0da but he does not want to appear and the funniest thing is that if he uses this code for example he appears f007 do not know what can be follow my code to analyze and link import of the icon library: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

HTML: 

<div class="col-md-4">
                    <span class="text-uppercase text-white">Categoria</span>
                    <ul class="nav flex-column links-categories">
                        <li class="nav-item"><a href="#" class="nav-link">Açougues<span>(45)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Adegas e bebidas<span>(64)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Água Mineral<span>(49)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Avícolas<span>(52)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Bar e lanches<span>(214)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Bombonieres<span>(7)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Buffets<span>(33)</span></a></a></li>
                        <li class="nav-item"><a href="#" class="nav-link">Cafeterias<span>(68)</span></a></a></li>
                    </ul>
                </div>

SCSS: 

.links-categories{
      li{
        position: relative;
        &:before{
          content:"\f0da";
          font-family: 'Font Awesome 5 Free';
          position: absolute;
          left: -20px;
          top: 0;
          color: $orange;

        }
        a{
          font-size: 14px;
          padding: 0;
        }
      }
    }

Here is the print of how the caret icon I want to use is: itdoesnotworkhoweverifIusethiscodeheref007itworks:

    
asked by anonymous 09.05.2018 / 17:33

2 answers

6

Add this to your CSS: 

font-weight: 900;

As I see it, this character is only available in this bold font. I do not understand the reason, you'll see it's because it's f0da : D

    
09.05.2018 / 18:08
1

According to the documentation for you to use in ::before you have to adjust some things. You will need to use fontawesome.js and not .css because it will only work with the font in SVG format. Then you have to call their script and do some customizations in your css. Documentation Link

Then first call the CDN in .js : 

<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js"></script>

Thenthescript:

<script>FontAwesomeConfig={searchPseudoElements:true};</script>

NowseeworkingasCSSready.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/>
    <script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js"></script><script>FontAwesomeConfig={searchPseudoElements:true};</script><style>body{margin-left:20px;}.links-categoriesli{position:relative;}.links-categoriesa{font-size:14px;padding:0;}/*estilosdo::before*/.links-categoriesli::before{display:none;}.links-categoriesli::before{font-family:"Font Awesome 5 Solid";
        content: "\f0da";
    }
    .nav .svg-inline--fa {
        color: orange !important;
        position: absolute;
        left: -20px;
        top: 3px;
    }
</style>
</head>
<body>
    
<div class="col-md-4">
    <span class="text-uppercase text-white">Categoria</span>
    <ul class="nav flex-column links-categories">
        <li class="nav-item"><a href="#" class="nav-link">Açougues<span>(45)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Adegas e bebidas<span>(64)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Água Mineral<span>(49)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Avícolas<span>(52)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Bar e lanches<span>(214)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Bombonieres<span>(7)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Buffets<span>(33)</span></a></li>
        <li class="nav-item"><a href="#" class="nav-link">Cafeterias<span>(68)</span></a></li>
    </ul>
</div>

        
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
    
09.05.2018 / 18:22
Find the smallest value in vector recursively UserForm in POS blocks client tab