Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.01.2017, 20:29
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

Как использовать fontawesome как обычный шрифт?
Не хотел ставить ссылки на ресурсы 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>
Изображения:
Тип файла: jpg 1.jpg (9.8 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2017, 20:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

sovsem-nub,
может чем поможет
https://habrahabr.ru/post/61033/
http://cufon.shoqolate.com/generate/
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2017, 21:25
Аватар для sovsem-nub
Профессор
Отправить личное сообщение для sovsem-nub Посмотреть профиль Найти все сообщения от sovsem-nub
 
Регистрация: 15.10.2014
Сообщений: 255

Сообщение от рони Посмотреть сообщение
sovsem-nub,
может чем поможет
https://habrahabr.ru/post/61033/
http://cufon.shoqolate.com/generate/
статья 2009 года.
и непонятно
"""W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера."""

до сифона я наверно не дозрею никогда. Мне наверное будет проще иконки в svg перекинуть или дальше :hover использовать, хотя это не всегда удобно.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как автоматически определять текущий месяц и использовать его как дедлайн? VeliaR Общие вопросы Javascript 1 02.03.2016 16:54
Как использовать экземпляр Ext.data.Model в дереве? Infarch ExtJS 3 05.01.2016 02:29
isDefaultSelected - как ее использовать для...? Semen Events/DOM/Window 2 25.08.2009 20:13
Как заставить браузер использовать закэшированное изображение? fog Общие вопросы Javascript 5 13.08.2009 15:40
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30