Font Awesome 5, почему не отображается содержимое CSS?

Если вы хотите включить FontAwesome, предоставленный вами URL-адрес должен находиться внутри тега head в виде файла stylesheet:

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.0.6/css/all.css">

Затем вы можете использовать Font Awesome, как вы это сделали.

^{If you are using the JS+SVG version Read this: Font Awesome 5 shows empty square when using the JS+SVG version}

Во-первых, вам нужно только включить файл CSS Font Awesome 5 в тег заголовка, используя:

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.13.0/css/all.css">

Или в файле CSS:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css")

Затем вам нужно исправить семейство шрифтов и содержание, как показано ниже:

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* You should use \ and not /*/
    font-family: "Font Awesome 5 Free"; /* This is the correct font-family*/
    font-style: normal;
    font-weight: normal;
    font-size:40px;
}

<i class = "fp-prev"></i>

В некоторых случаях вам также необходимо добавить

font-weight:900

Подробнее здесь: Шрифт Awesome 5 на псевдоэлементах показывает квадрат вместо значка

В качестве примечания: Font Awesome 5 предоставляет 4 разных font-family для каждого пакета значков:

Font Awesome 5 Free для бесплатных иконок.

Font Awesome 5 Brands для значков брендов, таких как Facebook, Twitter и т. д.

@import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

.fp-prev:before {
  color: #000;
  content: "\f099";
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

<i class = "fp-prev"></i>

Font Awesome 5 Pro для Шрифт Awesome Pro.

Font Awesome 5 Duotone также включен в пакет Pro.

Связанный: Font Awesome 5 Выбор правильного семейства шрифтов в псевдоэлементах

Я знаю, что очень поздно ответить на этот вопрос.

Вы должны включить Fontawesome CSS в заголовок.

CDN -

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.8.1/css/all.css">

Если вы загрузили исходные файлы, включите следующее

<link rel = "stylesheet" href = "path-to-your-font-awesome-folder/css/all.min.css" />

Позже вам нужно добавить CSS следующим образом -

.fp-prev:before {
    color:#000;
    content: '\f35a'; /* replace / with \ */
    font-family: "Font Awesome 5 Free"; /* here is the correct font-family */
    font-style: normal;
    font-weight: 900;
    text-decoration: inherit;
}

если вы хотите добавить его через тег <i>, вы можете следовать

<i class = "fas fa-arrow-alt-circle-right"></i>

Убедитесь, что ваш вес шрифта 900.

Обратитесь - https://github.com/FortAwesome/Font-Awesome/issues/11946

Для того же на GitHub была поднята проблема. Они предположили, что для значков с отличным шрифтом font-weight должен быть 900.

Надеюсь, это поможет вам всем.

Это случилось и со мной. Я использовал этот значок: as использовал font awesome 5 cdn.

Но когда я попытался выбрать тот же класс, а затем отредактировать значок, редактирование css для значка не выполнялось.

Таким образом, мы удалили «fas» из «.fas fa-plus-square» в селекторе css и сделали его «.fa-plus-square {}».

Итак, CSS был таким (для меня): .fa-plus-square{ float: right; }, где я удалил «fas». И у меня это сработало.

где класс Html был <i class = "fas fa-plus-square"></i>

И cdn, который я использовал: "https://use.fontawesome.com/releases/v5.0.7/css/all.css". Надеюсь, это поможет тебе

Сделайте свой font-weight: 900;. Я вижу, ты скучаешь по этому

Это не отображается из-за цветовой проблемы. Пожалуйста, следуйте шагу: -

Шаг- 1. Скопируйте этот стиль на свою страницу.

<link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.14.0/css/all.css">

Шаг - 2. Скопируйте этот код в верхнюю часть файла all.css на своей странице.

@import url("https://use.fontawesome.com/releases/v5.14.0/css/all.css"); 

Шаг 3. Используйте семейство шрифтов, содержание и цвет, как

   .password_invalid:before {
        color: #ff0000;
        content: '\f058';                     /* You should use \ and not /*/
        font-family: "Font Awesome 5 Free";  /* This is the correct font-family*/
        position: relative;
        margin-left: -36px;
        padding-right: 13px;
        font-weight: 400;
    }