Faced a problem - using icons in CSS using pseudo-elements - instead of the icon itself, just a square appears. If you specify in HTML through the tag <i> , then everything works. I tried to connect links of different versions, at the moment there is the last one:

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-VY3F8aCQDLImi4L+tPX4XjtiJwXDwwyXNbkH7SHts0Jlo85t1R15MlXVBKLNx+dj" crossorigin="anonymous">

Here is an example of how I connected:

 .breadcrumbs ul li a { position: relative; font-size: 15px; font-weight: normal; line-height: 6px; color: #454647; padding-right: 35px; } .breadcrumbs ul li a:before { position: absolute; font-family: FontAwesome; top: 0; right: 0; content: "\f30b"; }
  • what does the console say? - programmer403
  • in the console everything is clean - nirolo1
  • make sure the font files are connected - Ordman
  • fonts are connected via google fonts - nirolo1

2 answers 2

 .icon:before { position: absolute; font-family: Font Awesome\ 5 Free; top: 0; left: 0; content: "\f30b"; font-weight: 900; } .icon2:before { position: absolute; font-family: Font Awesome\ 5 Brands; top: 20px; left: 0; content: "\f17e"; color:blue; } 
 <link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/> <i class="icon"></i> <br> <i class="icon2"></i>

Look at the first class icon if fab means:

 font-family: Font Awesome\ 5 Brands;

if fas means:

 font-family: Font Awesome\ 5 Free; font-weight:900;
  • unfortunately did not help - nirolo1
  • @nirolo1 try to quote without quotes - programmer403
  • I tried, the result is the same - nirolo1
  • @ nirolo1 do you have your css later loaded than all.css? - programmer403
  • my css is last loaded - nirolo1 am

Why when selecting ALL, the arrows refuse to be drawn, I do not know. In SOLID mode, they are displayed:

 .breadcrumbs ul li a { position: relative; font-size: 15px; font-weight: normal; line-height: 6px; color: #454647; padding-right: 35px; } .breadcrumbs ul li a:before { position: absolute; font-family: Font Awesome\ 5 Free; top: 0; right: 0; content: "\f30b"; } 
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/solid.css" integrity="sha384-29Ax2Ao1SMo9Pz5CxU1KMYy+aRLHmOu6hJKgWiViCYpz3f9egAJNwjnKGgr+BXDN" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css" integrity="sha384-Lyz+8VfV0lv38W729WFAmn77iH5OSroyONnUva4+gYaQTic3iI2fnUKtDSpbVf0J" crossorigin="anonymous"> <div class="breadcrumbs"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> </ul> </div> = "https://use.fontawesome.com/releases/v5.0.9/css/solid.css" integrity = "sha384-29Ax2Ao1SMo9Pz5CxU1KMYy + aRLHmOu6hJKgWiViCYpz3f9egAJNwjnKGgr + BXDN" crossorigin = "anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/solid.css" integrity="sha384-29Ax2Ao1SMo9Pz5CxU1KMYy+aRLHmOu6hJKgWiViCYpz3f9egAJNwjnKGgr+BXDN" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/fontawesome.css" integrity="sha384-Lyz+8VfV0lv38W729WFAmn77iH5OSroyONnUva4+gYaQTic3iI2fnUKtDSpbVf0J" crossorigin="anonymous"> <div class="breadcrumbs"> <ul> <li><a href="#">Пункт1</a></li> <li><a href="#">Пункт2</a></li> </ul> </div>