­

Разное

Что такое Font Awesome и как его установить

Категория: Разное
Просмотров: 15924
­ Font Awesome
Version 4.0.3

Универсальный кодJoomla All
Font Awesome - это набор векторных иконок для сайта. С их помощью очень здорово и просто стилизовать и украшать сайт.

Преимущества

Live demo

Посмотрите, как с помощью Font Awesome оформлен вступительный текст и "КОМПАКТНОЕ МЕНЮ" слева на действующем сайте: MagMaps.Ru

Примеры

  • Иконки векторные, то есть будут выглядеть идеально при любом размере.
  • Их много, несколько сотен, и при этом регулярно добавляются новые.
  • Установка и использование довольно просты, можно вообще не грузить их себе на сайт, а просто использовать ссылки на CDN
  • Не требуют Javascriptов, что снимает головную боль о совместимости.

­ fa-camera-retro

fa-camera-retro

­ fa-camera-retro

­ fa-camera-retro

­ fa-camera-retro

Использование

Первые два примера вставлены так:

<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
<p><i class="fa fa-camera-retro fa-2x">fa-camera-retro</i></p>

Предварительно, конечно, надо вставить ссылки на файл .css

Есть два варианта:
1) Загрузить Font Awesome себе на сервер, а затем в голову сайта (между <head> и </head>) вставить:

<link rel="stylesheet" href="/ПУТЬ ДО ПАПКИ НА СЕРВЕРЕ/font-awesome.min.css"> 

2) Воспользоваться CDN (Content Delivery Network), вставив между <head> и </head> такую ссылку:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

При втором варианте, как вы понимаете, на ваш сервер вообще ничего не грузится. Мы сделали на этой странице именно так.

Хитрость

Есть одна хитрая штука. Некоторые редакторы не позволяют вставить код без чего-либо в этом месте: <i class="fa fa-camera-retro fa-lg">ЗДЕСЬ</i>. Выход мы нашли простой: вставить туда либо &nbsp; (пробел), либо &shy; (мягкий перенос).

Или вы можете воспользоваться подсказкой в комментариях ниже, а еще можете использовать плагин Sourcerer, вставляющий любой код в любое место.

Ссылки

Страница проекта Примеры Иконки

С этим плагином все файлы будут лежать на вашем сервере.

Да, еще: недавно мы оформили свой сайт с помощью этих иконок, так что за примером недалеко ходить - "Полезные штучки" в правом нижнем углу.

Расскажите друзьям


Самое популярное

Модуль от RusJoomla.ru

Недавно

  • добавили

  • обновили

  • смотрели

Реклама

­

Присоединяйтесь

 

Загрузите Joomla


Хороший хостинг в России. ­
Если при регистрации вы укажете PIN (промокод) 10746, мы будем вам благодарны. Вам бесплатно, нам приятно.

Яндекс.Метрика
Полезные штучки

Комментарии