Problem implementing icone from font awesome by css

Asked

Viewed 2,550 times

2

I have a problem loading my font via css I’m using the font awesome 5 I’m implementing the icons via content in the css but the icon I want to use is not working this would be the link of the icon I want to use F0da but he doesn’t want to appear and the funny thing is that if I use this code for example appears f007 do not know what can be follow my code to analyze and link import of the iconic 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 what the icon looks like: inserir a descrição da imagem aqui it doesn’t work but if I use that code here f007 it works: inserir a descrição da imagem aqui

css html5 font-awesome scss
  • 1

    Couldn’t be with Fontawesome 4?

  • @hugocsl then and that already started with the 5 to trying to use everything more current in this project until to using the new version of bootstrap hehehe has idea of what can be ?

  • I managed to do it with version 5 itself, had some details in the documentation. It’s kind of complicated but it worked :)

2 answers

6


Add this to your CSS:

font-weight: 900;

From what I see, this character is only available in this font Bold. I don’t understand the reason, will see is because it is f0da :D

  • +1 for the hexadecimal explanation :)

1

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

So first call the CDN on .js: 

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

Then the script:

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

Now see working already as CSS ready.

<!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-categories li {
        position: relative;
    }
    .links-categories a {
        font-size: 14px;
        padding: 0;
    }
    /* estilos do ::before*/
    .links-categories li::before {
        display: none;
    }
    .links-categories li::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>
    <script src="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>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Browser other questions tagged css html5 font-awesome scss

You are not signed in. Login or sign up in order to post.