Próbuję użyć FontAwesome w projekcie kompasu internetowego. Jak nie ma konkretnej dokumentacji wStrona FontAwesome, a ja nie używam Bootstrap, zastosowałem „Nie używam Bootstrap?” wskazówki, ale nie może to działać.

Wyjście

Nie dostaję żadnych konkretnych błędów, nie znaleziono ani nie skompilowałem błędów. Po prostu nic nie pokazuje, nie ma ikony ani tekstu. Wydaje się, że pliki czcionek FontAwesome nie ładują się.

Kroki, które zrobiłemPobierzfont-awesome informatorSkopiuj go do mojego folderu css projektów, gdzie mam wszystkie moje skompilowane css:project/css/font-awesomeImportujfont-awesome.scss plik w moim głównym arkuszu stylów sass jak ten@import url("font-awesome/scss/font-awesome.scss");Otworzyćfont-awesome.scss plik i zmień ścieżki importu, więc są teraz w stosunku do mojego skompilowanego pliku css i wyglądają tak@import url("font-awesome/scss/_variables.scss");Otworzyć_variables.scss częściowe w katalogu font-awesome / scss i zmień@FontAwesomePath od domyślnie do"font-awesome/font/", aby dopasować, gdzie są strony internetoweW moim pliku html dodałem przykład następujący w plikuStrona przykładów FontAwesome, więc dodałem<i class="icon-camera-retro"></i> Some text

W moim głównym pliku Sass dodano@font-face deklaracja

@include font-face('FontAwesome',
font-files(
'font-awesome/font/fontawesome-webfont.woff', woff,
'font-awesome/font/fontawesome-webfont.ttf', ttf,
'font-awesome/font/fontawesome-webfont.svg', svg),
'font-awesome/font/fontawesome-webfont.eot');

 %icon-font {
     font-family: 'FontAwesome', Helvetica, Arial, sans-serif;
  }

Rozszerz czcionkę w selektorze

.icon-camera-retro {
    @extend %icon-font;
 }

Skompiluj mój główny arkusz stylów za pomocącompass --watch bez błędów

Przesłałem wszystko

Aby wyjaśnić, taka jest struktura mojego projektu:

root
    sass
        mainsass.scss
    css
        font-awesome
            css
                font-awesome.css
            font
                font-archives.ttf/.woff/etc
            scss
                _partials (_variables.scss, _path.scss, _core.scss, etc)
                font-awesome.scss
        fonts
            some-custom-font.ttf
        mainsass.css

Więc jeśli ktoś przeczytał tutaj, co już doceniam, proszę o jakieś pomysły?