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

Question

[Светлана Галенко]

Добрый день, подскажите пожалуйста что я не так делаю..
Создала свои иконки, сгенерировала их через 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:

Comments

[Багонутый комп]

А что вы ожидали от
.mem-monument::before {
content: 'a';
}

[Светлана Галенко]

Ожидала иконку которой я присвоила эту букву.. Ведь в файлах, которые я скачала после генерации, иконки выводятся..

Answer 1

[Светлана Галенко]

Проблема была в том что я не отключила преобразование текста..
Нужно было в стилях прописать так:

/*! 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';
}

Answer 2

[Алексей Уколов]

Без разметки непонятно, но у вас шрифт одному классу назначается, а "иконка" выводится в другом.
Возможно, вот так будет работать:

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

Comments

[Светлана Галенко]

Здравствуйте, вот так у меня код написан, но иконка так и не выводится..

<li class="level dropdown">
    <span class="opener plus"></span>
    <a href="" title="" class="page-scroll">
        <i class="mem mem-monument"></i>
        Памятники
    </a>
</li>

[Алексей Уколов]

Тогда, наверное, дело в пути до файла шрифта - он у вас относительный и, скорее всего, в консоли браузера на этой странице вы увидите 404 для них.

[Светлана Галенко]

Алексей Уколов, нет, с путями тоже всё в порядке((