Использование Font Awesome в Photoshop
Всем привет! Сегодня я расскажу, как работать с иконочными шрифтами Font Awesome. Написание данного поста побудило меня на, то что я стал видеть много макетов где дизайнеры используют картинки вместо иконочного шрифта! Так делать не нужно! И не нужно забывать, что после создания макета его еще нужно будет, кому то верстать.
И так перед тем как начать использовать Font Awesome его сначала нужно скачать и установить в систему. Установку буду производить на системе Windows думаю, что для системы MacOS процедура будет похожей.
Скачивание и установка. Для того чтобы скачать этот шрифт переходим по ссылке — http://fontawesome.io нажимаем кнопку Download и нажимаем на No thanks, just download Font Awesome 4. Сохраняете архив в любое удобное место на Вашем ПК. Потом разархивируем архив в любое место. В папке будут находиться несколько папок и файл. Нам нужна папка с названием fonts, а все остальные используются для CSS и препроцессоров – грубо говоря, все это используется для верстки сайта. И так продолжим, заходим в папку fonts и двойным щелчком мыши открываем первый файл с названием FontAwesome. Во всплывающем окне нажимаем «Установить» в верхней части экрана и дожидаемся завершения установки. Все, установка Font Awesome успешно завершена!
Использование Font Awesome. Для вставки нужной иконки переходим сюда — http://fontawesome.io/cheatsheet/, выбираем понравившуюся иконку, выделяем ее как обычный текст мышкой и правой кнопкой копируем. Запускаем Photoshop и выбираем инструмент «Горизонтальный текст», вставляем эту иконку. Не пугайтесь, если иконка отображается как квадратик. Чтобы это исправить нужно ее выделить и в названии шрифта начните вбивать название FontAwesome и иконка станет похожей на иконку. Теперь Вы сможете ее растрировать или использовать как смарт-объект, трансформировать, накладывать цвет и т.д.
Важно. После установки данный шрифт будет доступен в любых других программах, где используются шрифты. Например, тот же Word.
Всем спасибо за то, что до читали до конца, и я надеюсь, что данная публикация была Вам полезна.
С уважением, Максим.
Как использовать Font Awesome в Photoshop
Всего несколько простых шагов и в ваших макетах, презентациях и документах появятся замечательные иконки из шрифта Font Awesome, которых там, кстати, аж 479 штук.
Если ваша жизнь хоть как то связана с дизайном, то вы наверняка знаете о Font Awesome — бесплатном шрифте, содержащем 479 векторных иконок, которые можно использовать в вебе. Сделать набор из иконок в формате шрифта, который можно стандартными средствами подгрузить на сайт, использовать в абсолютно любом размере, не думать, как эти иконки будут выглядеть на дисплеях Retina, потому что выглядеть они там будут отлично, а главное, менять их цвет, добавлять тени и использовать всю мощь оформления CSS — это просто отличная идея!
Практически любой программист знает, как подгрузить Font Awesome на сайт и использовать необходимые иконки там, но как же нарисовать сайт с иконками Font Awesome, скажем, в Adobe Photoshop?
Сделать это на самом деле несложно:
1. Забираем шрифт с GitHub — для этого идем на сайт шрифта и нажимаем большую кнопку Download. В скачанном архиве находится все необходимое для различных вариантов использования Font Awesome. Нам будет нужна десктопная версия шрифта в формате OTF, которая находится в папке «fonts».
2. Устанавливаем шрифт на компьютер — просто кликнете на файл OTF и нажмите кнопочку «Установить шрифт».
3. Итак, у нас все готово к работе, открываем Adobe Photoshop, выбираем Type Tool и шрифт Font Awesome Regular, который уже установлен в системе. Теперь осталось вставить нужную иконку в наш дизайн.
4. Чтобы это сделать, нам понадобится другая страница с сайта шрифта, которая называется Cheatsheet (http://fortawesome.github.io/Font-Awesome/cheatsheet/). На этой странице приведены все иконки шрифта с кодами Unicode. Чтобы вставить нужную иконку в дизайн, просто скопируйте саму иконку из Cheatsheet и вставьте ее в макете в Photoshop. Внимание, копировать надо именно саму иконку, а не ее код Unicode!
А теперь самое приятное — таким образом замечательные иконки из Font Awesome можно использовать не только в Photoshop, но и в любом другом приложении, например, в документе Pages или презентации Keynote. Просто скопируйте иконку в текстовое поле, где уже выбран шрифт Font Awesome, и в вашей презентации появятся великолепные иконки, которым можно задавать нужный цвет, менять их прозрачность и производить с ними любые другие манипуляции.
Как установить Font Awesome в Фотошоп
Привет, друзья. Все мы время от времени пользуемся шрифтовыми иконками Font Awesome при создании landing apge.
Это удобно, ускоряет разработку, к тому же это красиво смотрится и масштабируется. Но добавлять их в макет, не очень удобно, поэтому, умельцы подготовили отличный плагин FontAwesomePS. О нем и поговорим сегодня.
Интерфейс плагина
Как видите, в интерфейсе нет ничего необычного. Панелька, аналогичная слоям или другим инструментам, где мы можем выбрать иконку и, кликнув по ней, добавить ее как смарт объект на холст. Так как иконка добавляется как смарт объект, то мы можем уменьшать и увеличивать ее без потерь качества, что очень удобно.
Кроме того, на панели плагина присутствует поле поиска и возможность добавить иконку в избранное, что ускоряет как поиск нужного изображения, так и работу в целом.
Если идея подключить плагин с иконками от Font Awesome для Photoshop вас заинтересовала, то давайте перейдем к скачиванию и установке.
Как установить
Для начала давайте скачаем архив с о сайта разработчиков Creativedo.co.
В архиве есть версия для MAC, Windows и инструкция по установке. На самом деле есть несколько способов, но давайте воспользуемся тем, который описан в архиве. Так как версия плагина в формате ZXP, то нам понадобится инструмент для установки. Как и написано в инструкции, давайте скачаем установщик ZXPinstaller
ZXP представляет собой пакет с расширением для программ Adobe, например для Фотошоп, Illustrator, Premiere Pro или Dreamweaver.
После установки запустите программу и просто перетяните файл плагина в рабочую область. FontAwesomePS автоматически установится и будет доступен в расширениях Photoshop.
Если процесс установки прошел нормально, то вы увидите такое сообщение:
Теперь запустите Photoshop, перейдите в меню «Окно» — «Расширения» и поставьте галочку, напротив FontAwesomePS
В панель инструментов (справа) выведется иконка плагина, открыв которую вы увидите набор иконок, как и было показано на первом скриншоте.
Вот такой полезный инструмент, для дизайнеров landing page и любых других сайтов и интерфейсов. А какими плагинами для Фотошоп пользуетесь вы? Напишите, пожалуйста, в комментариях, что вам помогает ускорить процесс разработки макета?
Иконочный шрифт FontAwesome: использование в Фотошопе
Иконочный шрифт Font Awesome — не единственный подобный шрифт, но весьма добротный по набору иконок в нем на все случаи жизни)
Иконочные шрифты сейчас удобно использовать в веб-дизайне, в качестве картинок для сайта, потому что иконку можно, как текст, масштабировать до любого размера без потери качества, а также легко задать или поменять цвет на более подходящий, да и набор изображений вполне удовлетворит потребностям веб-дизайнера)
Но иконочный шрифт можно использовать не только на сайтах, его можно установить и на компьютер, например на ОС Windows) Что мне недавно и потребовалось.
Моя задача состояла в том, чтобы выяснить, можно ли использовать иконочный шрифт для Photoshop, чтобы пользоваться готовыми иконками, увеличивая их до необходимого размера и делая из них полноценные изображения.
В общем, задача выполнимая, но потребовалось разобраться.
Как установить Font Awesome на компьютер
Для начала зайдем на официальный сайт шрифта http://fontawesome.io/cheatsheet/ и скачаем архив с файлами шрифта, шрифт бесплатный, скачивается без проблем. Находим архив для загрузки, скачиваем, открываем архив и устанавливаем файлы с расширением
Шрифт FontAwesome в данный момент подразделили на Solid (жирный) и regular (обычный).
Устанавливаем все предложенные шрифты, нажимая поочередно на файлы .otf — откроется установка шрифта на windows, нажмем на кнопочку «Установить» в левом верхнем углу — шрифт установится на компьютер. (Рис. ниже)
Как использовать шрифт Font Awesome в Photoshop?
Откроем фотошоп, затем откроем или создадим новое окно-изображение. Выберем инструмент «Текст», выберем в раскрывающемся списке шрифтов уже установленный FontAwesome. Затем нам снова потребуется перейти на официальный сайт шрифта, на ту самую страницу где представлены все иконки шрифта http://fontawesome.io/cheatsheet.
Там мы выбираем любую иконку.
Теперь внимание: обратим внимание на раздел SOLID или REGULAR. Если иконку выбрали из раздела Solid, то копируем саму иконку (выделяем саму иконку, изображение, не название и не юникод, и копируем в буфер).
Далее возвращаемся в фотошоп -> выбираем инструмент «Текст», ставим курсор в нужное место — > в окне шрифтов выбираем один из имеющихся у вас шрифов FontAwesome (free, brand).
И снова ВНИМАНИЕ: если иконку копировали на сайте из раздела Solid, то рядом с названием шрифта устанавливаем жирность вместо regular -> solid ! Это важно, иначе у вас отобразится просто прямоугольник. Если копировали значок из раздела Regular (там прозрачные контурные иконки), то проследим чтобы жирность шрифта была так же Regular.
После этих предварительных действий на месте курсора вставляем иконку через «вставка»: меню-edit (редактирование) -paste (вставка) или правой кнопкой мыши выводим контекстное меню и «Встивить» (paste), либо просто используем сочетание клавиш CTRL+V (вставка скопированного объекта)
Как видим, на месте курсора отобразится нужная иконка. Ее можно увеличить, перекрасить, превратить в картинку. Так же можно попробовать использовать и другие иконочные шрифты. Ну, например, готовый футбольный мячик))
Читайте также в моём блоге:
Как скачать видео с сайта?
Итак, допустим, требуется какое-то интересное и полезное видео скопировать себе в копилку, чтобы всегда была возможность повторно его просмотреть оффлайн.
- < Назад
- Вперёд >
Как использовать Font Awesome в Photoshop?
Приветствую, коллеги! Сегодня нам стоит поговорить о такой замечательной штуке, под именем Font Awesome, а именно о том как работать с ним в фотошопе. Ведь мы – армия дизингеров и должны помогать друг-другу. Ну еще и качественно делать свою работу… ну вы поняли.
Для понимания Font Awesome — это иконочный шрифт, который можно использовать с практически любыми элементами веб-страниц(и не только) для повышения наглядности и улучшения дизайна в целом. Все мы знаем что иконочки мы считываем быстрей, чем текст, поэтому владение такими инструментами сделают жизнь как нам, так и пользователям проще. Этот замечательный шрифт разработал человечек с именем Дэйв Ганди, собрав коллекцию иконок, которые удовлетворят даже самые необычные потребности в таких символах.
Когда вы собираете макет какого-нибудь сайтика, помните, что после того как вы его передадите в производство, его нужно будет кому-то сверстать. И этот человек, увидев ваши «жопеги» схватится за голову и будет проклянать вас до конца сдачи проекта(с его стороны).
Чтобы избежать недоразумений и наличия вашей куклы-вуду у кого-то в офисе, да и просто показать свой профессионализм, рекомендую вам установить этот замечательный пакет. Да и чтобы вы не били меня палками за то, что я попусту расхваливаю эту штуку, давайте посмотрим на преимущества и недостатки:
Преимущества Font Awesome
1. Каждая из иконок является векторной и может быть изменена до любого размера без потери качества.
2. Иконка является текстовым символом, а значит вы можете применить к ней любое стилевое свойство, доступное для шрифтов. Это может быть цвет, фон, тень и так далее.
3. Иконки прекрасно функционируют и отображаются во всех браузерах, даже в старом IE8 (удивительно да?)
4. Хорошо сочетаются с кучей фреймворков, например Bootstrap
5. Это не только шрифт, но еще и стилевой файл, в котором обозначены несколько типовых решений, например размеры иконок, поворот, выравнивание. Достаточно подключить стиль и назначить класс для элемента.
6. Можно накладывать иконки друг на друга, анимировать, сочетать меж собой. Всё это расширяет возможности.
7. Вкусный пункт! Шрифт свободен для коммерческого использования. Никто к вам с повесткой не придёт.
Недостатки Font Awesome
1. Символы могут иметь только один цвет, однако, это можно обойти использовав объединение иконок или при помощи эффектов CSS.
2. Библиотека слишком избыточна, собственно, как и большинство других. Если вам нужна лишь дюжина иконок, то придётся подключить несколько сотен.
Как мы видим, недостатков совсем не много и они не критичны, поэтому перейдём к установке шрифта в систему, потому что речь идет о локальной работе в фотошопе. Рассмотрим установку для Windows. Первым делом переходим по ссылке – http://fontawesome.io и тыкаем «Download»
На втором экране выбираем «Free for Desktop» и сохраняем архив в любое удобное место.
Открываем архив и находим файлы шрифтов с расширением «.otf». В моём случае случае они располагаются по пути: /fontawesome-free-5.9.0-desktop/otfs. Извлекаем их в любую папку, после чего выделяем все и нажатием правой кнопки мыши устанавливаем в систему. Все остальные файлы в архиве используются для CSS и препроцессоров – грубо говоря, все это для верстки сайта.
Congratulation! Font Awesome успешно установлен!
Теперь пару слов о том как это дело использовать. Для вставки нужной иконки нам понадобится шпаргалка. Найти ее можно по сыллке https://fontawesome.com/cheatsheet?from=io или https://fontawesome.ru/cheatsheet/ Лично мне вторая нравится больше, она более компактная. Выбираем оттуда любую понравившуюся иконку, и просто выделяем её, после чего копируем, как обычный текст. В открытом макете, создаем текстовое поле и вставляем иконку аналогичным способом. Если иконка будет выглядеть как пречеркнутый квадратик, то пугаться и бросать дизайн не стоит. Нужно лишь выделить весь текст и выбрать в меню шрифтов FontAwesome.
И на последок, не забывайте, что теперь шрифт доступен в любой программе, использующей шрифты. Например в ворде 🙂
Как подключить и использовать Font Awesome 5. Полное руководство.
Доброго времени суток, читатели моего блога! Мне постоянно поступает масса вопросов по шрифту Font Awesome – «Как подключить Font Awesome?», «Как его использовать на сайте или в Photoshop?», «Почему отображаются вместо иконок квадратики?» и тому подобные. И я решил сделать подробное руководство по Font Awesome 5, в котором вы найдете ответы на все эти вопросы.
Как подключить Font Awesome
В этой главе мы подробно разберемся как подключить Font Awesome 5 всеми возможными способами. И какой из них лучше выбрать.
Подключение с помощью CDN
Чтобы подключить иконочный шрифт Font Awesome 5 с помощью CDN необходимо перейти на
страницу: Font Awesome
Start и выставить необходимые параметры.
Полученный код вставляем в тег <head> вашего сайта, на тех
страницах где вы собираетесь использовать иконки.
Скриншот №1На скриншоте №1 изображены настройки, которые я использую.
- Выбираем версию, которая нам нужна. Free — бесплатная версия. Pro — платная и имеет дополнительные стили и наборы иконок.
- Начертание шрифта, которое мы будем использовать в своем проекте.
- Что мы будем использовать. Webfont — иконочный шрифт. SVG — иконки в формате .svg
- Сгенерированный код для подключения Font Awesome с помощью CDN.
Чтобы не переходить на сайт, я размещу код со стандартными настройками здесь.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
Подключить Font Awesome с помощью CDN очень просто. Ведь вам нужно разместить всего лишь одну строчку кода в свой проект и все будет работать. Файлы будут храниться на сервере разработчиков. Но я предпочитаю хранить все на своем хостинге, так как я точно могу быть уверен, что все будет работать корректно и никакие изменения и обновления со стороны разработчика шрифта не затронут мой проект.
Подключение Font Awesome 5 с хранением файлов на своем хостинге (CSS)
Для начала нужно скачать файлы Font Awesome и разместить их на свой хостинг. Для этого переходим по этой ссылке https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself или скачиваем по прямой ссылке.
После скачивания получаем архив с файлами, как на скриншоте №2:
Скриншот №2Для работы иконочного шрифта необходимы только папки выделенные красным. И то в паке /CSS нам нужен только один файл css/all.min.css (Смотрите скриншот №3)
Скриншот №3Файл all.min.css хранит все стили шрифта Font Awesome, я использую именно этот файл. На это есть много причин связанные с моим личным удобством. Вы же можете использовать тот файл, стили которого вы будете использовать. Например, если вы хотите использовать только бесплатный иконочный шрифт, достаточно подключить файл fontawesome.min.css.
.min в названии файла показывает, что файл сжат, то есть убраны лишние пробелы и переносы. Это увеличивает скорость обработки этого файла, но если вы собираетесь его редактировать, что я вам делать не рекомендую, то удобней использовать файл без .min
Переносим папку webfont и файл all.min.css на свой хостинг.
Очень важно! Папка webfont нужно располагать на директорию выше чем файл all.min.css, иначе шрифт Font Awesome не подключится, так как в стилях прописан именно такой путь для файлов со шрифтами. Если такой способ противоречит структуре вашего проекта, тогда просто пропишите в файле all.min.css новый путь до папки webfont.
У меня это выглядит так:
Скриншот №4В папке fontawesome хранится один файл all.min.css
Теперь нам нужно подключить Font Awesome к своему сайту, для этого подключаем стили all.min.css, так как вы обычно подключаете файлы со стилями. Этот процесс я описывать не буду, так как он имеет огромное количество вариантов и каждый делает это по-своему. Но если вы новичок и не знаете, как подключать файлы со стилями, то Google вам в помощь. При возникновении трудностей пишите в комментариях, и я обязательно вам помогу.
Как использовать Font Awesome
В этой части статьи мы разберем как правильно использовать Font Awesome в веб-разработке или дизайне на примере Photoshop.
Как использовать Font Awesome в HTML
Это самый простой способ использования иконочного шрифта. Достаточно выбрать из каталога иконок Font Awesome нужную иконку и вставить ее код в нужное место вашего html документа. На скриншоте № 5 под цифрой 1 изображено место откуда можно узнать код иконки.
Скриншот №5Как использовать Font Awesome в псевдоэлементах after и before CSS. Параметр content.
Чтобы использовать иконочный шрифт для его отображение в псевдоэлементах after или before, нужно использовать Unicode иконки. Который можно взять на странице с нужной иконкой (на скриншоте №5 цифра 2)
Теперь пишем стили css для элемента before или after:
div::after{
display: block;
content: '\f17b';
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
font-weight: 900;
width: 100px;
height: 100px;
}
Разберем главные моменты в коде.
3. В свойстве content указываем Unicode.
4. Обязательно задаем семейства шрифта. Обратите внимание у Font Awesome 5 используется 2 шрифта «Font Awesome 5 Brands» и «Font Awesome 5 Free». В избежании ошибки указывайте оба.
5. Font-weight — обязательно нужно указывать 900, иначе иконки будут отображаться в виде квадратиков. Другая толщина доступна только в PRO версии.
Как использовать шрифт Font Awesome в Photoshop
Для того, чтобы использовать иконочный шрифт в фотошопе необходимо установить шрифт на свой компьютер. Они находятся в папке webfont в архиве Font Awesome. Для установки нужно кликнуть правой кнопкой мыши на нужный шрифт и нажать «Установить».
Смотрите на скриншоте №6:
Скриншот №6После установки можно использовать Font Awesome в фотошопе, для этого мы копируем необходимую нам иконку с каталога (цифра 3 на скриншоте №5) и вставляем в photoshop как текст. Незабываем выбрать в настройках семейство шрифта Font Awesome.
Скриншот №7Стилизация иконок FontAwesome
Для стилизации иконок используются стандартные стили CSS для шрифтов. Например, чтобы поменять цвет иконки нужно использовать свойство CSS color, а поменять размер иконок Font Awesome нужно использовать свойство font-size.
Вот и вся информация, которая необходима для использования иконок от Font Awesome, как для разработки сайтов, так и для проектирования дизайн-макетов в Photoshop. Надеюсь статья вам понравилась и решила все ваши проблемы. А если нет, посмотрите мое видео на эту тему, там я показываю все на примере.
Если информация оказалась полезной поделитесь ей с друзьями в социальных сетях, а так же подписывайтесь на обновление блога и youtube канал, чтобы не пропустить полезные материалы.
Было полезно? Поделись статьей с друзьями!Поделиться
Поделиться
Твитнуть
Класснуть
Запостить
Отправить
Таблица значений иконок Font Awesome
Приветствую. Наверное вы уже знаете о таком замечательном инструменте как иконочный шрифт от Font Awesome для сайта.
Если нет, то вкратце расскажу, это набор масштабируемых векторных иконок, с помощью которых можно добавлять на сайт разнообразные иконки и при этом не использовать обычные картинки, но самое важное это то что с ними можно работать как с обычным текстом, то есть можно добавлять к иконке размер, цвет, тень, производить разнообразные форматирования текста и так далее.
Это очень удобно и не нужно в фотошопе постоянно нарезать какие то картинки, ну и плюс это очень стильно и красиво смотрится, я уже не говорю о том что картинки нагружают ваш сайт и он медленнее работает, в данном случае все намного проще.
Перед тем как пользоваться иконками Font Awesome на своем сайте вам нужно их будет подключить, способов есть несколько, к примеру скачать и загрузить на свой сайт или сделать прямое подключение из сервера CDNJS.
Я не буду сейчас описывать детально как подключить иконки Awesome на свой сайт с загрузкой всех файлов, так как статья чуточку о другом, как это сделать вы можете найти самостоятельно в интернете, а для того что бы подключить их из ресурса CDNJS вам достаточно на сайт где то над </head> добавить строку:
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»> |
После добавления этой строки вы сможете полностью работать с иконочным шрифтом.
Ок, думаю что такое шрифт Font Awesome вы сможете узнать самостоятельно из поисковых систем, сегодня я же хочу добавить на страницу значения Font Awesome каждого из шрифтов именно для использования из css файла.
По умолчанию шрифт добавляется конкретно на страницу html используя тег <i> к примеру так:
<i aria-hidden=»true»></i>
<i aria-hidden=»true»></i> |
Но иногда нам нужно добавлять его в файлы css, а так как просто вставить название шрифта в файл стилей не получится, он попросту работать не будет, нужно добавлять именно значение шрифта, и мы сегодня рассмотрим все значения шрифта Font Awesome для возможности добавления их в css.
Допустим вы хотите к какому то элементу на сайте впереди него добавить иконку Awesome, ниже наведу пример как это делается:
.element:before { content: «\f000»; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; }
.element:before { content: «\f000»; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; } |
То есть мы добавили :before к нужному нам блоку и добавили шрифт иконок font-family: FontAwesome; со значением самой иконки content: «\f000»; ( ), вот и все в принципе, теперь иконка отобразится впереди указанного блока, все остальные css стили указанные здесь только для форматирования внешнего вида иконки.
И так ниже предоставляю для вас полный список иконок Awesome с указанием значений всех его шрифтов. Вы конечно же можете любое значение посмотреть и самостоятельно в своем подключенном файле font-awesome.min.css но я думаю что будет намного удобнее узнать значение шрифта воспользовавшись предоставленной на нашем сайте таблицей.
Список значков шрифта Awesome и их значений для CSS
fa-glass»\f000″
fa-music»\f001″
fa-search»\f002″
fa-envelope-o»\f003″
fa-heart»\f004″
fa-star»\f005″
fa-star-o»\f006″
fa-user»\f007″
fa-film»\f008″
fa-th-large»\f009″
fa-th»\f00a»
fa-th-list»\f00b»
fa-check»\f00c»
fa-times»\f00d»
fa-search-plus»\f00e»
fa-search-minus»\f010″
fa-power-off»\f011″
fa-signal»\f012″
fa-cog»\f013″
fa-trash-o»\f014″
fa-home»\f015″
fa-file-o»\f016″
fa-clock-o»\f017″
fa-road»\f018″
fa-download»\f019″
fa-arrow-circle-o-down»\f01a»
fa-arrow-circle-o-up»\f01b»
fa-inbox»\f01c»
fa-play-circle-o»\f01d»
fa-repeat»\f01e»
fa-refresh»\f021″
fa-list-alt»\f022″
fa-lock»\f023″
fa-flag»\f024″
fa-headphones»\f025″
fa-volume-off»\f026″
fa-volume-down»\f027″
fa-volume-up»\f028″
fa-qrcode»\f029″
fa-barcode»\f02a»
fa-tag»\f02b»
fa-tags»\f02c»
fa-book»\f02d»
fa-bookmark»\f02e»
fa-print»\f02f»
fa-camera»\f030″
fa-font»\f031″
fa-bold»\f032″
fa-italic»\f033″
fa-text-height»\f034″
fa-text-width»\f035″
fa-align-left»\f036″
fa-align-center»\f037″
fa-align-right»\f038″
fa-align-justify»\f039″
fa-list»\f03a»
fa-outdent»\f03b»
fa-indent»\f03c»
fa-video-camera»\f03d»
fa-picture-o»\f03e»
fa-pencil»\f040″
fa-map-marker»\f041″
fa-adjust»\f042″
fa-tint»\f043″
fa-pencil-square-o»\f044″
fa-share-square-o»\f045″
fa-check-square-o»\f046″
fa-arrows»\f047″
fa-step-backward»\f048″
fa-fast-backward»\f049″
fa-backward»\f04a»
fa-play»\f04b»
fa-pause»\f04c»
fa-stop»\f04d»
fa-forward»\f04e»
fa-fast-forward»\f050″
fa-step-forward»\f051″
fa-eject»\f052″
fa-chevron-left»\f053″
fa-chevron-right»\f054″
fa-plus-circle»\f055″
fa-minus-circle»\f056″
fa-times-circle»\f057″
fa-check-circle»\f058″
fa-question-circle»\f059″
fa-info-circle»\f05a»
fa-crosshairs»\f05b»
fa-times-circle-o»\f05c»
fa-check-circle-o»\f05d»
fa-ban»\f05e»
fa-arrow-left»\f060″
fa-arrow-right»\f061″
fa-arrow-up»\f062″
fa-arrow-down»\f063″
fa-share»\f064″
fa-expand»\f065″
fa-compress»\f066″
fa-plus»\f067″
fa-minus»\f068″
fa-asterisk»\f069″
fa-exclamation-circle»\f06a»
fa-gift»\f06b»
fa-leaf»\f06c»
fa-fire»\f06d»
fa-eye»\f06e»
fa-eye-slash»\f070″
fa-exclamation-triangle»\f071″
fa-plane»\f072″
fa-calendar»\f073″
fa-random»\f074″
fa-comment»\f075″
fa-magnet»\f076″
fa-chevron-up»\f077″
fa-chevron-down»\f078″
fa-retweet»\f079″
fa-shopping-cart»\f07a»
fa-folder»\f07b»
fa-folder-open»\f07c»
fa-arrows-v»\f07d»
fa-arrows-h»\f07e»
fa-bar-chart»\f080″
fa-twitter-square»\f081″
fa-facebook-square»\f082″
fa-camera-retro»\f083″
fa-key»\f084″
fa-cogs»\f085″
fa-comments»\f086″
fa-thumbs-o-up»\f087″
fa-thumbs-o-down»\f088″
fa-star-half»\f089″
fa-heart-o»\f08a»
fa-sign-out»\f08b»
fa-linkedin-square»\f08c»
fa-thumb-tack»\f08d»
fa-external-link»\f08e»
fa-sign-in»\f090″
fa-trophy»\f091″
fa-github-square»\f092″
fa-upload»\f093″
fa-lemon-o»\f094″
fa-phone»\f095″
fa-square-o»\f096″
fa-bookmark-o»\f097″
fa-phone-square»\f098″
fa-twitter»\f099″
fa-facebook»\f09a»
fa-github»\f09b»
fa-unlock»\f09c»
fa-credit-card»\f09d»
fa-rss»\f09e»
fa-hdd-o»\f0a0″
fa-bullhorn»\f0a1″
fa-bell»\f0f3″
fa-certificate»\f0a3″
fa-hand-o-right»\f0a4″
fa-hand-o-left»\f0a5″
fa-hand-o-up»\f0a6″
fa-hand-o-down»\f0a7″
fa-arrow-circle-left»\f0a8″
fa-arrow-circle-right»\f0a9″
fa-arrow-circle-up»\f0aa»
fa-arrow-circle-down»\f0ab»
fa-globe»\f0ac»
fa-wrench»\f0ad»
fa-tasks»\f0ae»
fa-filter»\f0b0″
fa-briefcase»\f0b1″
fa-arrows-alt»\f0b2″
fa-users»\f0c0″
fa-link»\f0c1″
fa-cloud»\f0c2″
fa-flask»\f0c3″
fa-scissors»\f0c4″
fa-files-o»\f0c5″
fa-paperclip»\f0c6″
fa-floppy-o»\f0c7″
fa-square»\f0c8″
fa-bars»\f0c9″
fa-list-ul»\f0ca»
fa-list-ol»\f0cb»
fa-strikethrough»\f0cc»
fa-underline»\f0cd»
fa-table»\f0ce»
fa-magic»\f0d0″
fa-truck»\f0d1″
fa-pinterest»\f0d2″
fa-pinterest-square»\f0d3″
fa-google-plus-square»\f0d4″
fa-google-plus»\f0d5″
fa-money»\f0d6″
fa-caret-down»\f0d7″
fa-caret-up»\f0d8″
fa-caret-left»\f0d9″
fa-caret-right»\f0da»
fa-columns»\f0db»
fa-sort»\f0dc»
fa-sort-desc»\f0dd»
fa-sort-asc»\f0de»
fa-envelope»\f0e0″
fa-linkedin»\f0e1″
fa-undo»\f0e2″
fa-gavel»\f0e3″
fa-tachometer»\f0e4″
fa-comment-o»\f0e5″
fa-comments-o»\f0e6″
fa-bolt»\f0e7″
fa-sitemap»\f0e8″
fa-umbrella»\f0e9″
fa-clipboard»\f0ea»
fa-lightbulb-o»\f0eb»
fa-exchange»\f0ec»
fa-cloud-download»\f0ed»
fa-cloud-upload»\f0ee»
fa-user-md»\f0f0″
fa-stethoscope»\f0f1″
fa-suitcase»\f0f2″
fa-bell-o»\f0a2″
fa-coffee»\f0f4″
fa-cutlery»\f0f5″
fa-file-text-o»\f0f6″
fa-building-o»\f0f7″
fa-hospital-o»\f0f8″
fa-ambulance»\f0f9″
fa-medkit»\f0fa»
fa-fighter-jet»\f0fb»
fa-beer»\f0fc»
fa-h-square»\f0fd»
fa-plus-square»\f0fe»
fa-angle-double-left»\f100″
fa-angle-double-right»\f101″
fa-angle-double-up»\f102″
fa-angle-double-down»\f103″
fa-angle-left»\f104″
fa-angle-right»\f105″
fa-angle-up»\f106″
fa-angle-down»\f107″
fa-desktop»\f108″
fa-laptop»\f109″
fa-tablet»\f10a»
fa-mobile»\f10b»
fa-circle-o»\f10c»
fa-quote-left»\f10d»
fa-quote-right»\f10e»
fa-spinner»\f110″
fa-circle»\f111″
fa-reply»\f112″
fa-github-alt»\f113″
fa-folder-o»\f114″
fa-folder-open-o»\f115″
fa-smile-o»\f118″
fa-frown-o»\f119″
fa-meh-o»\f11a»
fa-gamepad»\f11b»
fa-keyboard-o»\f11c»
fa-flag-o»\f11d»
fa-flag-checkered»\f11e»
fa-terminal»\f120″
fa-code»\f121″
fa-reply-all»\f122″
fa-star-half-o»\f123″
fa-location-arrow»\f124″
fa-crop»\f125″
fa-code-fork»\f126″
fa-chain-broken»\f127″
fa-question»\f128″
fa-info»\f129″
fa-exclamation»\f12a»
fa-superscript»\f12b»
fa-subscript»\f12c»
fa-eraser»\f12d»
fa-puzzle-piece»\f12e»
fa-microphone»\f130″
fa-microphone-slash»\f131″
fa-shield»\f132″
fa-calendar-o»\f133″
fa-fire-extinguisher»\f134″
fa-rocket»\f135″
fa-maxcdn»\f136″
fa-chevron-circle-left»\f137″
fa-chevron-circle-right»\f138″
fa-chevron-circle-up»\f139″
fa-chevron-circle-down»\f13a»
fa-html5″\f13b»
fa-css3″\f13c»
fa-anchor»\f13d»
fa-unlock-alt»\f13e»
fa-bullseye»\f140″
fa-ellipsis-h»\f141″
fa-ellipsis-v»\f142″
fa-rss-square»\f143″
fa-play-circle»\f144″
fa-ticket»\f145″
fa-minus-square»\f146″
fa-minus-square-o»\f147″
fa-level-up»\f148″
fa-level-down»\f149″
fa-check-square»\f14a»
fa-pencil-square»\f14b»
fa-external-link-square»\f14c»
fa-share-square»\f14d»
fa-compass»\f14e»
fa-caret-square-o-down»\f150″
fa-caret-square-o-up»\f151″
fa-caret-square-o-right»\f152″
fa-eur»\f153″
fa-gbp»\f154″
fa-usd»\f155″
fa-inr»\f156″
fa-jpy»\f157″
fa-rub»\f158″
fa-krw»\f159″
fa-btc»\f15a»
fa-file»\f15b»
fa-file-text»\f15c»
fa-sort-alpha-asc»\f15d»
fa-sort-alpha-desc»\f15e»
fa-sort-amount-asc»\f160″
fa-sort-amount-desc»\f161″
fa-sort-numeric-asc»\f162″
fa-sort-numeric-desc»\f163″
fa-thumbs-up»\f164″
fa-thumbs-down»\f165″
fa-youtube-square»\f166″
fa-youtube»\f167″
fa-xing»\f168″
fa-xing-square»\f169″
fa-youtube-play»\f16a»
fa-dropbox»\f16b»
fa-stack-overflow»\f16c»
fa-instagram»\f16d»
fa-flickr»\f16e»
fa-adn»\f170″
fa-bitbucket»\f171″
fa-bitbucket-square»\f172″
fa-tumblr»\f173″
fa-tumblr-square»\f174″
fa-long-arrow-down»\f175″
fa-long-arrow-up»\f176″
fa-long-arrow-left»\f177″
fa-long-arrow-right»\f178″
fa-apple»\f179″
fa-windows»\f17a»
fa-android»\f17b»
fa-linux»\f17c»
fa-dribbble»\f17d»
fa-skype»\f17e»
fa-foursquare»\f180″
fa-trello»\f181″
fa-female»\f182″
fa-male»\f183″
fa-gratipay»\f184″
fa-sun-o»\f185″
fa-moon-o»\f186″
fa-archive»\f187″
fa-bug»\f188″
fa-vk»\f189″
fa-weibo»\f18a»
fa-renren»\f18b»
fa-pagelines»\f18c»
fa-stack-exchange»\f18d»
fa-arrow-circle-o-right»\f18e»
fa-arrow-circle-o-left»\f190″
fa-caret-square-o-left»\f191″
fa-dot-circle-o»\f192″
fa-wheelchair»\f193″
fa-vimeo-square»\f194″
fa-try»\f195″
fa-plus-square-o»\f196″
fa-space-shuttle»\f197″
fa-slack»\f198″
fa-envelope-square»\f199″
fa-wordpress»\f19a»
fa-openid»\f19b»
fa-university»\f19c»
fa-graduation-cap»\f19d»
fa-yahoo»\f19e»
fa-google»\f1a0″
fa-reddit»\f1a1″
fa-reddit-square»\f1a2″
fa-stumbleupon-circle»\f1a3″
fa-stumbleupon»\f1a4″
fa-delicious»\f1a5″
fa-digg»\f1a6″
fa-pied-piper»\f1a7″
fa-pied-piper-alt»\f1a8″
fa-drupal»\f1a9″
fa-joomla»\f1aa»
fa-language»\f1ab»
fa-fax»\f1ac»
fa-building»\f1ad»
fa-child»\f1ae»
fa-paw»\f1b0″
fa-spoon»\f1b1″
fa-cube»\f1b2″
fa-cubes»\f1b3″
fa-behance»\f1b4″
fa-behance-square»\f1b5″
fa-steam»\f1b6″
fa-steam-square»\f1b7″
fa-recycle»\f1b8″
fa-car»\f1b9″
fa-taxi»\f1ba»
fa-tree»\f1bb»
fa-spotify»\f1bc»
fa-deviantart»\f1bd»
fa-soundcloud»\f1be»
fa-database»\f1c0″
fa-file-pdf-o»\f1c1″
fa-file-word-o»\f1c2″
fa-file-excel-o»\f1c3″
fa-file-powerpoint-o»\f1c4″
fa-file-image-o»\f1c5″
fa-file-archive-o»\f1c6″
fa-file-audio-o»\f1c7″
fa-file-video-o»\f1c8″
fa-file-code-o»\f1c9″
fa-vine»\f1ca»
fa-codepen»\f1cb»
fa-jsfiddle»\f1cc»
fa-life-ring»\f1cd»
fa-circle-o-notch»\f1ce»
fa-rebel»\f1d0″
fa-empire»\f1d1″
fa-git-square»\f1d2″
fa-git»\f1d3″
fa-hacker-news»\f1d4″
fa-tencent-weibo»\f1d5″
fa-qq»\f1d6″
fa-weixin»\f1d7″
fa-paper-plane»\f1d8″
fa-paper-plane-o»\f1d9″
fa-history»\f1da»
fa-circle-thin»\f1db»
fa-header»\f1dc»
fa-paragraph»\f1dd»
fa-sliders»\f1de»
fa-share-alt»\f1e0″
fa-share-alt-square»\f1e1″
fa-bomb»\f1e2″
fa-futbol-o»\f1e3″
fa-tty»\f1e4″
fa-binoculars»\f1e5″
fa-plug»\f1e6″
fa-slideshare»\f1e7″
fa-twitch»\f1e8″
fa-yelp»\f1e9″
fa-newspaper-o»\f1ea»
fa-wifi»\f1eb»
fa-calculator»\f1ec»
fa-paypal»\f1ed»
fa-google-wallet»\f1ee»
fa-cc-visa»\f1f0″
fa-cc-mastercard»\f1f1″
fa-cc-discover»\f1f2″
fa-cc-amex»\f1f3″
fa-cc-paypal»\f1f4″
fa-cc-stripe»\f1f5″
fa-bell-slash»\f1f6″
fa-bell-slash-o»\f1f7″
fa-trash»\f1f8″
fa-copyright»\f1f9″
fa-at»\f1fa»
fa-eyedropper»\f1fb»
fa-paint-brush»\f1fc»
fa-birthday-cake»\f1fd»
fa-area-chart»\f1fe»
fa-pie-chart»\f200″
fa-line-chart»\f201″
fa-lastfm»\f202″
fa-lastfm-square»\f203″
fa-toggle-off»\f204″
fa-toggle-on»\f205″
fa-bicycle»\f206″
fa-bus»\f207″
fa-ioxhost»\f208″
fa-angellist»\f209″
fa-cc»\f20a»
fa-ils»\f20b»
fa-meanpath»\f20c»
fa-buysellads»\f20d»
fa-connectdevelop»\f20e»
fa-dashcube»\f210″
fa-forumbee»\f211″
fa-leanpub»\f212″
fa-sellsy»\f213″
fa-shirtsinbulk»\f214″
fa-simplybuilt»\f215″
fa-skyatlas»\f216″
fa-cart-plus»\f217″
fa-cart-arrow-down»\f218″
fa-diamond»\f219″
fa-ship»\f21a»
fa-user-secret»\f21b»
fa-motorcycle»\f21c»
fa-street-view»\f21d»
fa-heartbeat»\f21e»
fa-venus»\f221″
fa-mars»\f222″
fa-mercury»\f223″
fa-transgender»\f224″
fa-transgender-alt»\f225″
fa-venus-double»\f226″
fa-mars-double»\f227″
fa-venus-mars»\f228″
fa-mars-stroke»\f229″
fa-mars-stroke-v»\f22a»
fa-mars-stroke-h»\f22b»
fa-neuter»\f22c»
fa-genderless»\f22d»
fa-facebook-official»\f230″
fa-pinterest-p»\f231″
fa-whatsapp»\f232″
fa-server»\f233″
fa-user-plus»\f234″
fa-user-times»\f235″
fa-bed»\f236″
fa-viacoin»\f237″
fa-train»\f238″
fa-subway»\f239″
fa-medium»\f23a»
fa-y-combinator»\f23b»
fa-optin-monster»\f23c»
fa-opencart»\f23d»
fa-expeditedssl»\f23e»
fa-battery-full»\f240″
fa-battery-three-quarters»\f241″
fa-battery-half»\f242″
fa-battery-quarter»\f243″
fa-battery-empty»\f244″
fa-mouse-pointer»\f245″
fa-i-cursor»\f246″
fa-object-group»\f247″
fa-object-ungroup»\f248″
fa-sticky-note»\f249″
fa-sticky-note-o»\f24a»
fa-cc-jcb»\f24b»
fa-cc-diners-club»\f24c»
fa-clone»\f24d»
fa-balance-scale»\f24e»
fa-hourglass-o»\f250″
fa-hourglass-start»\f251″
fa-hourglass-half»\f252″
fa-hourglass-end»\f253″
fa-hourglass»\f254″
fa-hand-rock-o»\f255″
fa-hand-paper-o»\f256″
fa-hand-scissors-o»\f257″
fa-hand-lizard-o»\f258″
fa-hand-spock-o»\f259″
fa-hand-pointer-o»\f25a»
fa-hand-peace-o»\f25b»
fa-trademark»\f25c»
fa-registered»\f25d»
fa-creative-commons»\f25e»
fa-gg»\f260″
fa-gg-circle»\f261″
fa-tripadvisor»\f262″
fa-odnoklassniki»\f263″
fa-odnoklassniki-square»\f264″
fa-get-pocket»\f265″
fa-wikipedia-w»\f266″
fa-safari»\f267″
fa-chrome»\f268″
fa-firefox»\f269″
fa-opera»\f26a»
fa-internet-explorer»\f26b»
fa-television»\f26c»
fa-contao»\f26d»
fa-500px»\f26e»
fa-amazon»\f270″
fa-calendar-plus-o»\f271″
fa-calendar-minus-o»\f272″
fa-calendar-times-o»\f273″
fa-calendar-check-o»\f274″
fa-industry»\f275″
fa-map-pin»\f276″
fa-map-signs»\f277″
fa-map-o»\f278″
fa-map»\f279″
fa-commenting»\f27a»
fa-commenting-o»\f27b»
fa-houzz»\f27c»
fa-vimeo»\f27d»
fa-black-tie»\f27e»
fa-fonticons»\f280″
Вас также может заинтересовать
06Сен2018
05Сен2018
28Июн2018