Как правильно подключить свои собственные иконочные шрифты font?

Добрый день, подскажите пожалуйста что я не так делаю..
Создала свои иконки, сгенерировала их через fontsquirrel, подключаю на сайте но вместо красивой иконки появляются буквы которые я присвоила при создании иконок. Как правильно их подключить к сайту?
Делаю я таким образом:
В папке fonts находятся созданные шрифты:
font-awesome-webfont.woff2
font-awesome-webfont.woff

В css прописала:
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 10, 2020 */

@font-face {
    font-family: 'MyFontRegular';
    src: url('../fonts/font-awesome-webfont.woff2') format('woff2'),
    url('../fonts/font-awesome-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.mem {
    font-family: 'MyFontRegular';
    font-weight: normal;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mem-monument::before {
    content: 'a';
}


вместо нужной иконки на сайте появилась только буква - A:
5f319fab8407a103822548.png
  • Вопрос задан
  • 160 просмотров
Решения вопроса 1
swallow_97
@swallow_97 Автор вопроса
Проблема была в том что я не отключила преобразование текста..
Нужно было в стилях прописать так:
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 10, 2020 */

@font-face {
    font-family: 'MyFontRegular';
    src: url('../fonts/font-awesome-webfont.woff2') format('woff2'),
    url('../fonts/font-awesome-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.mem {
    font-family: 'MyFontRegular';
    font-weight: normal;
    font-style: normal;
    text-transform: none;

    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mem-monument::before {
    content: 'a';
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Без разметки непонятно, но у вас шрифт одному классу назначается, а "иконка" выводится в другом.
Возможно, вот так будет работать:
.mem-monument::before {
    content: 'a';
    font-family: 'MyFontRegular';
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы