{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6vtda"},{"data":{"image":{"id":"5c6e655d4e666500c090bdde"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2htta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Font Awesome — Пожалуй самый популярный иконочный шрифт. Шрифт дает нам масштабируемые векторные значки, которые можно мгновенно настроить: размер, цвет, тень и все, что можно сделать с помощью CSS.","type":"unstyled","key":"t0br"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Особенности шрифта","type":"header-two","key":"fvc5s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Один шрифт = 675 иконок","type":"unordered-list-item","key":"bje8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бес использования JavaScript","type":"unordered-list-item","key":"3cj0l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Меньше проблем с совместимостью, потому что Font Awesome не требует JavaScript.","type":"unordered-list-item","key":"dl4vp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Бесконечная масштабируемость","type":"unordered-list-item","key":"f2kn6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Масштабируемая векторная графика означает, что каждый значок выглядит потрясающе при любом размере.","type":"unordered-list-item","key":"7vshe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"С чего начать","type":"header-two","key":"etroa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Font Awesome CDN — это самый простой способ подключения Font Awesome на вашем веб-сайте или в приложении, причем всего лишь с одной строкой кода. Без загрузки или установки!","type":"unstyled","key":"eacq1"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":30,"offset":3}],"inlineStyleRanges":[],"text":"На официальном сайте Font Awesome вам нужно лишь ввести свой email и вы получить ссылку на CDN (Content Delivery Network — система распределенной доставки контента), с его помощью можно подключить Font Awesome, но если вам не нужен CDN, ну к примеру ваши пользователи не разбросаны по всему земному шару, а сосредоточены в пределах одной страны, да и не особо высокие показатели посещаемости, меньше миллиона в день =), то можно скачать и подключить Font Awesome локально, на своем сервере.","type":"unstyled","key":"8g2hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Ручная установка","type":"header-two","key":"4lj0t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше мы уже рассмотрим вариант ручной установки шрифта Font Awesome в наш сайт на базе WordPress.","type":"unstyled","key":"7s8j2"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":34,"offset":62}],"inlineStyleRanges":[],"text":"Первым делом нам необходимо скачать архив с шрифтом по ссылке http://fontawesome.io/get-started/","type":"unordered-list-item","key":"f5ivp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":72,"style":"BOLD"},{"length":39,"offset":132,"style":"BOLD"}],"text":"При переходе по ссылке, промотайте страницу чуть ниже и выберите кнопку Donwload, в появившемся всплывающем окне, просто выбирайте «No thanks, just download Font Awesome 4» и все, дальше пойдет автоматическая загрузка шрифта.","type":"unordered-list-item","key":"eot4m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После того, как вы скачали архив, распакуйте его у себя на компьютере.","type":"unordered-list-item","key":"dlqla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключитесь по FTP к вашему сайту, перейдите в каталог wp-content / themes / ваша тема /","type":"unordered-list-item","key":"cnp3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":56,"style":"ITALIC"},{"length":38,"offset":92,"style":"ITALIC"},{"length":18,"offset":143,"style":"ITALIC"},{"length":39,"offset":181,"style":"ITALIC"}],"text":"Согласно дереву расположения файлов, я закачал из папки Font Awesome/css в папку на сервере wp-content/themes/моя тема/assets/css/, а из папки Font Awesome/fonts в папку на сервере wp-content/themes/моя тема/assets/fonts","type":"unordered-list-item","key":"292hp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше переходим к редактированию нашего файла functions.php, потому как именно он отвечает за подключение всех стилей, добавим в него следующий код:","type":"unordered-list-item","key":"fujab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"wp_enqueue_style('font-awesome', get_template_directory_uri().'/assets/css/font-awesome.min.css');","type":"unstyled","key":"mkuo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Как использовать FontAwesome","type":"header-two","key":"22van"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":17,"offset":134}],"inlineStyleRanges":[],"text":"Иконки вставляются с помощью специальной HTML разметки. Весь список доступных иконок с пояснениями как их использовать можно найти на официальном сайте.","type":"unstyled","key":"cjkkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Я покажу на примере при вставке иконки WordPress. Сама иконка в шрифте называется fa-wordpress и вставляется она с помощью кода:","type":"unstyled","key":"c8p0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"67mh9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данные иконки можно кастомизировать на свой вкус, например можно указать размер","type":"unstyled","key":"1ge0b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" fa-lg\n fa-2x\n fa-3x\n fa-4x\n fa-5x","type":"unstyled","key":"1fdmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"4C6jJA4zqexJt0JhYkj5"}],"entityMap":{"0":{"data":{"href":"http://fontawesome.io/get-started/","url":"http://fontawesome.io/get-started/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"http://fontawesome.io/get-started/","url":"http://fontawesome.io/get-started/"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"http://fontawesome.io/icons/","url":"http://fontawesome.io/icons/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}