у меня проблемы с переносом шрифта в мой проект - PullRequest
Новая
       4

у меня проблемы с переносом шрифта в мой проект

0 голосов
/ 05 марта 2020

Итак ... Я получил доступ:

https://fontawesome.com/start

Скачал файл, это почтовый индекс с большим количеством вещей, я просто хочу использовать значки, поэтому я просто взял файл fontawesome.min. css и соединился с моим html файлом: 

<link rel="stylesheet" href="lib/css/fontawesome.min.css">

на их сайте я нашел код, который хочу использовать 

<i class="fas fa-cloud-download-alt"></i>

Ссылка для этого кода: https://fontawesome.com/icons/cloud-download-alt?style=solid

Не работает, я попробовал их документацию, но мне там не повезло. Код, который я взял на их веб-сайте, не работает.

Что мне здесь не хватает? Как я могу добавить Font Awesome в свой проект?

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Итак, я нашел ответ, нужны эти два файла: all.min. css и all.min. js плюс папка webfonts в root, и тогда весь код из «Font Awesome» будет работать, эти файлы минимально необходимы. Также он может быть даже меньше, если вам не нужен весь код, вместо «все», есть файлы меньшего размера, которые позволяют использовать только меньшую часть «Font Awesome».

0 голосов
/ 05 марта 2020

Чтобы загрузить минимум для максимальной производительности, вы можете использовать это

1 . Создайте папку «Веб-шрифты». В этой папке создайте папку «font-awesome» и скопируйте три файла шрифтов awesome в эту папку. Затем создайте таблицу стилей "fontloader. css" и свяжите ее в вашем файле html с <link rel="stylesheet" href="webfonts/fontloader.css">

+-- [webfonts]
|      +-- [font-awesome]
|      |      +-- fa-solid-900.woff2
|      |      +-- fa-solid-900.woff
|      |      +-- fa-solid-900.ttf
|      |
|      +-- fontloader.css

Содержимое загрузчика шрифтов. css

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("../webfonts/font-awesome/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/font-awesome/fa-solid-900.woff") format("woff"),
         url("../webfonts/font-awesome/fa-solid-900.ttf") format("truetype");
}
.fa, .fas, .far, .fal, .fad, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-size: 1em;
    line-height: 1;
    text-rendering: auto;
}

2 . Найдите значок (ы) на веб-сайте Font Awesome https://fontawesome.com/icons?s=SOLID или по брендам в https://fontawesome.com/icons?s=BRANDS

Например, значок поиска в вашем css

.fa-search:before {
    content: "\f002"
}

3 . Затем используйте следующее в вашем html

<i class="fas fa-search"></i>
...