Перейти к содержимому


Внимание!

На форуме можно зарегистрироваться в два клика, используя социальную сеть Вконтакте. Для этого нажмите сюда.


Фотография

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

иконки Glyphicon Font Awesome

  • Авторизуйтесь для ответа в теме
В теме одно сообщение

#1 elenstar

elenstar

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений
  • ГородМосква

Отправлено 14 Февраль 2015 - 16:59

В этой теме обсуждается все, что связано с применением иконок.
Как известно, в состав Bootstrap 3 бесплатно входит 200 иконок Glyphicon.
Но это небольшой выбор и поэтому советую использовать в процессе создания сайта иконки Font Awesome http://fontawesome.io/icons/ .
Векторные иконки Font Awesome прекрасно интегрируются в Bootstrap 3.
Они масштабируются без потери качества и им возможно менять размер, цвет, тень посредством CSS.
Устанавливать папку с иконками не нужно. Стоит только прописать между тегами <head></head> следующую строку:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Ставим в то место, где хотим видеть иконку тег:

<i class="fa fa-diamond"></i>

И она подстроится под размер текста рядом.
Чтобы задать специальный размер иконки, дописывается нужный масштаб:

<i class="fa fa-diamond fa-lg"></i>
<i class="fa fa-diamond fa-2x"></i>
<i class="fa fa-diamond fa-3x"></i>
<i class="fa fa-diamond fa-4x"></i>
<i class="fa fa-diamond fa-5x"></i>

Все, Font Awesome можно использовать.


  • Administrator это нравится

Аудит сайта, помощь в оптимизации и продвижении http://bootstrap-3.r...ss-audit-saita/

Bootstrap 3 - создание сайтов http://rubootstrap.ru


#2 elenstar

elenstar

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений
  • ГородМосква

Отправлено 14 Февраль 2015 - 20:10

Я постоянно использую социальные иконки Font Awesome (там даже ВК есть :) ):

<ul class="social-share">
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-vk"></i></a></li>
    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
    <li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>

 

Выглядит это примерно таким образом:
screen.png


  • Administrator это нравится

Аудит сайта, помощь в оптимизации и продвижении http://bootstrap-3.r...ss-audit-saita/

Bootstrap 3 - создание сайтов http://rubootstrap.ru





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных