I downloaded the entire archive, converted the css file to sass, put it in the libs folder, wrote in the font.sass file in this form:

+font-face("fontAwesome", "../fonts/fontAwesome/fontawesome-webfont", $file-formats: eot woff ttf)

In the main styles file, main.sass added font usage:

 @import "../app/libs/fontAwesome/font-awesome.sass"

There is such a line in the font style file.

 @font-face font-family: 'FontAwesome' src: url('../app/fonts/fontAwesome/fontawesome-webfont.eot?v=4.6.3') src: url('../app/fonts/fontAwesome/fontawesome-webfont.eot?#iefix&v=4.6.3') format("embedded-opentype"), url('../app/fonts/fontAwesome/fontawesome-webfont.woff2?v=4.6.3') format("woff2"), url('../app/fonts/fontAwesome/fontawesome-webfont.woff?v=4.6.3') format("woff"), url('../app/fonts/fontAwesome/fontawesome-webfont.ttf?v=4.6.3') format("truetype"), url('../app/fonts/fontAwesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format("svg") font-weight: normal font-style: normal

Does it need to be removed?

I use index.html with the following construction:

 <div class="adress"> <i class="fa fa-map-marker" aria-hidden="true"></i>105066, г. Москва, Переулок Токмаков, дом 11 </div>

It turns out this result:

enter image description here

Expected:

enter image description here

Console

enter image description here

link to project archive https://yadi.sk/d/YhSyM7e5w6ML5

  • Give a link to the test page. and what does the console say? - Alex
  • so I work for localhost ( - Miroslav
  • make an archive and write a download link - Alex
  • Added a screen from the console and a link to the archive - Miroslav

3 answers 3

You have a problem with the paths to the font files. In the _optimized_gulp_sass/app/css/main.min.css change all starting paths from ../app/fonts/fontAwesome/ to ../fonts/fontAwesome/

Result:

enter image description here

  • It is strange how then other fonts are displayed, which are also connected in the same folder? - Miroslav
  • @Miroslav for the rest of the fonts in your _optimized_gulp_sass/app/css/fonts.min.css is the correct path starting at ../fonts/ , example url(../fonts/Exo2Bold/Exo2Bold.eot?#iefix - Alex
  • changed in font-awesome.sass - yes, it was there as you say, but did not help ((( - Miroslav
  • @Miroslav in the archive you gave, in the file /app/index.html you connect the .css files There is no problem in the current connection - goo.gl/ZMsFLz Please show how and where you connect the .sass files At first glance we see in font -awesome.sass path ../app/fonts/ and in main.sass @import "../app/libs/fontAwesome/font-awesome.sass" Check for correct paths. - Alex
  • I connect them all in the main.sass file. take.ms/IeZOV , tried to remove the app - Then Sublime gives an error that the file is not found or not read. For example, this is how my owl-carousel is connected to me and it works great (((although after deleting the "app" on the way to the file, it also works ((( - Miroslav

Just transfer the fonts folder from font-awesome to a folder with regular fonts.

  • more precisely its contents - Vladimir

If an urgent need to solve the problem, try to connect like this:

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  • one
    the vehicle has a problem after converting to sass. what have the usual connection css? - Alex
  • your way works ... but this is not quite the right decision))) - Miroslav