Иконочные шрифты используются для включения определенных стандартных иконок в контент вашего сайта. В Шрифт 'Awesome' — хороший пример, предлагающий множество преимуществ по сравнению с другими шрифтами-значками. Мы также предлагаем использовать Иконочные шрифты от Freepik в качестве хорошей альтернативы.
Первоначально Font Awesome был разработан Дэйв Ганди для использования с Твиттер Начальная загрузка. Font Awesome можно использовать с WordPress с помощью Плагин Font Awesome Icons спроектирован Рэйчел Бейкер.
Вот краткое введение в такие шрифты и то, где шрифт Awesome вписывается в стиль, который, возможно, все еще находится в зачаточном состоянии.
Зачем использовать иконочные шрифты
Когда вы создаете веб-сайт, изображения занимают много места в Интернете из-за размеров файлов. Их также необходимо вызывать на ваши веб-страницы с помощью разметки HTML. Более того, их масштабирование часто является проблемой, поскольку они теряют четкость при увеличении размера. Обычное изображение разрешается только в том случае, если оно используется с исходными размерами.
Когда вы ищете стандартные изображения значков, например для автомобилей, определенных знаков пунктуации или графических значков, шрифты значков могут предложить вам масштабируемые изображения, которые выглядят одинаково независимо от размера шрифта. Это похоже на то, что буквы и цифры выглядят одинаково, независимо от того, используете ли вы размер шрифта 2 или 5 или размер шрифта 10 или 24 пункта.
Во многих случаях люди просто не используют изображения из-за этой проблемы, и из-за этого их статья или онлайн-отчет страдают от детализации или ясности. Используя Font Awesome, они могут добавлять базовые значки на свои сайты и масштабировать их до необходимого размера, ограниченного только размерами своих документов - и они могут это сделать без потери определения. Вы можете смотреть на масштабируемые значки так же, как на масштабируемые символы шрифта.
Вот несколько доступных значков видеоплеера и социальных сетей:
А также новые значки версии 3.0:
Каждый из них может быть увеличен в размере без потери четкости. Вы можете изменить их цвет и легко добавить тени и изменить их прозрачность. Фактически, вы можете делать с ними все, что можете, с изображениями, а затем и с некоторыми, без недостатков, связанных с размером файла.
Это в основном то, что могут делать иконочные шрифты, и, в частности, шрифт Awesome. Вот некоторая информация о том, как их использовать и извлечь из них максимальную пользу, а также один или два недостатка, связанных с лицевыми панелями значков:
Использование Font Awesome
С обычным загрузочным CSS:
Font Awesome можно использовать с CSS Bootstrap по умолчанию, скопировав каталог шрифтов Awesome в свой проект, а затем скопировав font-awesome.min.css в проект. Затем вы должны открыть font-awesome.min.css и отредактировать пути к шрифтам, чтобы они указывали на расположение Awesome.
В разделе Head вашего HTML-кода следует указать расположение font-awesome.min.css следующим образом:
Путь к шрифту является относительным от вашего каталога CSS.
С помощью Bootstrap Less:
Если вы используете Twitter Bootstrap с LESS CSS, сначала скопируйте каталог шрифтов Font Awesome в свой проект, а font-awesome-less - в каталог Bootstrap Less. Потом:
- а) Откройте bootstrap.less и замените @import «sprites.less»; с @import «font-awesome.less»;
- б) Откройте файл font-awesome.less своего проекта и отредактируйте переменную @FontAwesomePath, чтобы она указывала на каталог шрифтов.
@FontAwesomePath: "../font";
Путь к шрифту является относительным от вашего скомпилированного каталога CSS.
После этого все готово - хотя, если вы используете статический компилятор, вам следует перекомпилировать LESS.
Не используя Bootstrap:
Если вы не используете Bootstrap, то после копирования файла шрифта в каталог проекта вы можете скопировать любой из двух файлов font-awesome в свой проект, открыть его в конце, а затем отредактировать расположение шрифта, чтобы он указывал на каталог шрифтов.
Если вы используете Internet Explorer 7, используйте font-awesome-ie7.min.css.
Как использовать Font Awesome в WordPress
Есть два простых способа использовать шрифты значков в WordPress, один из которых вы загрузили в плагин *. Вы можете встроить их с помощью HTML или использовать шорткод. Вот примеры каждого из них:
Используя HTML: Там, где вы хотите, чтобы шрифт отображался, просто добавьте имя элемента к имени класса следующим образом: [html] [/ html]
добавит черный круг.
Вы можете изменить размер круга следующим образом:
Вероятно, вам будет проще добавить размер шрифта в таблицу стилей CSS, если вы собираетесь часто использовать один и тот же размер значка, а также указанный выше формат для исключений.
Использование шорткода: Шорткод проще, но обычно он работает только для сообщений и содержимого страниц на экране редактора сообщений. Формат [icon name = icon-circle] там, где вы хотите, чтобы круг.
Оборотная сторона иконочных шрифтов
Иконочные шрифты отлично подходят для использования, когда вам нужно добавить определенный значок в свой блог или веб-сайт, и на них можно ссылаться для выполнения определенных функций. Однако не все идеально, и у иконочных шрифтов тоже есть недостатки. Это общие проблемы, о которых сообщают пользователи шрифтов с иконками, которые не применимы к Font Awesome - вот почему он такой «Классный!»
- Одна из них - потенциальная проблема с программами чтения с экрана, которые могут читать значок в виде буквы алфавита. Это не проблема с Font Awesome из-за способа получения символов шрифта.
- Они могут быть представлены только одним цветом или цветным градиентом с использованием градиентов CSS3. Это настоящая проблема с иконочными шрифтами?
- Чтобы создать собственный шрифт, соответствующий вашим потребностям, может потребоваться время. Тем не менее, уже существует большой выбор потрясающих шрифтов, предлагаемых Font Awesome, и этот список постоянно расширяется. Хотя это бесплатный шрифт с закрытым исходным кодом, утвержденные шрифты, разработанные пользователями, добавляются регулярно.
Сводка по генератору Font Awesome
Генератор Font Awesome - один из лучших бесплатных шрифтов, доступных в настоящее время. Хотя он был разработан для использования с Twitter Bootstrap, его можно адаптировать для использования на обычных веб-сайтах, а также доступен плагин WordPress, который предлагает лучшее из этого шрифта значков. Если вы используете иконочные шрифты, попробуйте Font Awesome, потому что вы можете быть приятно удивлены, когда освоите его.
* Плагин WordPress Font Awesome Icons доступен по адресу https://github.com/rachelbaker/
Вивек Натх.Р
В своем блоге я использую плагин Wp Exclusive Icon fonts http://wordpress.org/extend/plugins/wp-elusive-iconfont/
Преимущество в том, что в нем больше параметров настройки, таких как изменение цвета, размера, ориентации и т. Д., А также множество других значков. Проверьте это.
Раджеш Намасе
Спасибо Vivek за то, что поделились этим плагином WordPress с нашими читателями.
Джеймс Дризен
Привет, Вивек, спасибо, что поделились плагином, я ищу что-то подобное. Я бы также попробовал Font Awesome Icons, чтобы узнать, какая из них мне подходит. Хорошая статья Раджеш, пожалуйста, продолжай в том же духе! Все лучшее для вас.
Раджеш Намасе
Также попробуйте использовать плагин Font Awesome WordPress :)
Энди
Привет, я как раз искал что-то подобное, так как мне лень создавать все эти классы и добавлять стили и изображения в тему. Спасибо!!
Vipin
Спасибо и Вивеку, и Раджешу, оба предоставили информацию, которую я искал.
Rohit Chougale
привет раджеш
'расскажите мне, можем ли мы воспроизводить видео на php в Интернете, если да, то расскажите мне, как ..
Раджеш Намасе
Вы можете попробовать использовать видео теги HTML 5 :) А HTML 5 использовать с PHP просто :)
Vaibhav
Я обязательно добавлю этот плагин в свой wordpress в соответствии с ..
спасибо админ ..!
Ананд Хиттинали
ну, я не многословный человек, поэтому этот плагин действительно мне пригодился. спасибо, что поделились этим плагином.
Лили
Есть плагин для этого? Как здорово, что я впервые это слышу. Спасибо за то, что поделился этим.
Мохсин Али
Очень интересный плагин Rajesh, откуда вы взяли эти уникальные идеи.
Дэвид Крофт
Здравствуйте,
Спасибо за этот хороший блог, потому что эта тема «Иконочные шрифты» для меня очень нова, поэтому я могу узнать много нового и новых слов в вашем блоге.
Генератор шрифтов - действительно лучший из доступных в настоящее время бесплатных шрифтов с иконками. так что это очень полезно.
Дэвид Джонсон
К вашему сведению, вы использовали термин «генератор Font Awesome», но ваша статья касается самого Font Awesome, а не генератора. Слово «генератор» имеет особое значение в контексте значков шрифтов. Примеры генераторов шрифтов значков, поддерживающих Font Awesome, включают icnfnt и Fontello.
Раджеш Намасе
Хорошо, мы обновили заголовок статьи, спасибо.
Carlton
Вы упустили один существенный недостаток иконочных шрифтов: они плохо ухудшаются. Все пользователи, у которых отключена загрузка шрифтов (потому что они либо заботятся о безопасности, раньше заботились о безопасности и забыли, либо были настроены кем-то другим, заботящимся о безопасности и не подозревающим), просто видят уродливые пустые символы глифов. Чтобы быть ответственным пользователем иконочного шрифта, вы должны согласиться с тем, чтобы бросить этих пользователей под автобус.
Аюш Агравал
Эта статья кажется немного старой, но я хотел бы сказать, что хороший способ использования font awesome - это cdn: //netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css. .
Помогает блоггерам сократить время загрузки.
Викас
Хороший пост, Font Awesome - одна из лучших разработок в мире дизайна.
Марк Фокс
Спасибо, что поделился. Я более склонен использовать его сейчас.
Гаурав Датт
Мужчина! 2013, как я мог не видеть этого раньше, но все равно работал у меня безупречно. Спасибо за это.