Как использовать fontawesome как обычный шрифт?
Вложений: 1
Не хотел ставить ссылки на ресурсы fontawesome на сайт, так как сайт должен работать локально и мне не понравились их огромные CSS. Поэтому просто скачал их шрифт, вставил его как шрифт и стал добавлять иконки через :before используя код символа (есть на их сайте) Но когда попробовал вставить просто как <a>\F07A </a> ничего не появилось. Код символа работает только в шрифте. Тогда я установил шрифт на комп и из Word скопировал нужный символ. Он вставился в код в виде квадратика, но при этом на странице отобразился в виде нормальной иконки (возможно шрифт подцепился с компа).
Кто-нибудь знает как вывести символ из шрифта по его коду? к сожалению песочница не подгружает внешние шрифты, поэтому эксперимент показать не могу.
<style>
@font-face {
font-family: 'fontawesome';
src: url('https://heeg.ru/fonts/fontawesome-webfont.eot');
src: url('https://heeg.ru/fonts/fontawesome-webfont.woff') format('woff'), url('https://heeg.ru/fonts/fontawesome-webfont.ttf') format('truetype'), url('https://heeg.ru/fonts/fontawesome-webfont.svg') format('svg');
}
a {
font-family: "fontawesome"; display:block; position:relative;
}
a:before { content: "\F07A"; font-family: "fontawesome"; position: absolute; font-size: 1em; z-index: 100; color: #eee; top: -10px; left: 0px; color:red; }
</style>
<body>
<a> привет!!! </a>
</body>
|
|
Цитата:
и непонятно """W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.""" до сифона я наверно не дозрею никогда. Мне наверное будет проще иконки в svg перекинуть или дальше :hover использовать, хотя это не всегда удобно. |
| Часовой пояс GMT +3, время: 22:24. |