Наконец-то решил добавить статью в рубрику Bootstrap 3.
Что же в этой статье вас ждет?
Я расскажу и покажу, как создать красивые иконки и кнопки социальных сетей, используя шрифты иконок Font Awesome
С чего начать?
- Подключите Font Awesome к вашему проекту. Если вы не помните, как это сделать, почитайте вот эту статью.
- Скачайте bootstrap-social.css и закиньте его в папку «CSS». Подключите bootstrap-social.css (добавьте код между тегами <head>здесь код</head>):
<link href="css/bootstrap-social.css" rel="stylesheet">
- Добавление кнопки или иконки:
Кнопка (btn-social)
<a class="btn btn-block btn-social btn-twitter"> <span class="fa fa-twitter"></span> Sign in with Twitter </a>
Результат будет вот таким:
Иконка (btn-social-icon)
<a class="btn btn-social-icon btn-twitter"> <span class="fa fa-twitter"></span> </a>
Результат будет вот таким:
Попробую все объяснить.
Желтым цветом я выделит тот кусок CSS класса, который отвечает за цвет кнопки.
Зеленым – тот кусок CSS класса, который отвечает за саму кнопку:
Основной макет и схема у вас есть. Теперь пробуйте подставлять к коду CSS классы из таблицы.
Список внешнего вида кнопок и иконок
Sing in with App.net
Цвет btn-adn
Класс иконки fa-adn
<a class="btn btn-block btn-social btn-adn"> <span class="fa fa-adn"></span> Sing in with App.net </a>
Sign in with Bitbucket
Цвет btn-bitbucket
Класс иконки fa-bitbucket
<a class="btn btn-block btn-social btn-bitbucket"> <span class="fa fa-bitbucket"></span> Sign in with Bitbucket </a>
Sign in with Dropbox
Цвет btn-bitbucket
Класс иконки fa-dropbox
<a class="btn btn-block btn-social btn-dropbox"> <span class="fa fa-dropbox"></span>Sign in with Dropbox </a>
Sign in with Facebook
Цвет btn-facebook
Класс иконки fa-facebook
<a class="btn btn-block btn-social btn-facebook"> <span class="fa fa-facebook"></span>Sign in with Facebook </a>
Sign in with Flickr
Цвет btn-flickr
Класс иконки fa-flickr
<a class="btn btn-block btn-social btn-flickr"> <span class="fa fa-flickr"></span> Sign in with Flickr </a>
Sign in with Foursquare
Цвет btn-foursquare
Класс иконки fa-foursquare
<a class="btn btn-block btn-social btn-foursquare"> <span class="fa fa-foursquare"></span>Sign in with Foursquare </a>
Sign in with GitHub
Цвет btn-github
Класс иконки fa-github
<a class="btn btn-block btn-social btn-github"> <span class="fa fa-github"></span>Sign in with GitHub </a>
Sign in with Google
Цвет btn-google
Класс иконки fa-google
<a class="btn btn-block btn-social btn-google"> <span class="fa fa-google"></span> Sign in with Google </a>
Sign in with Instagram
Цвет btn-instagram
Класс иконки fa-instagram
<a class="btn btn-block btn-social btn-instagram"> <span class="fa fa-instagram"></span> Sign in with Instagram </a>
Sign in with LinkedIn
Цвет btn-linkedin
Класс иконки fa-linkedin
<a class="btn btn-block btn-social btn-linkedin"> <span class="fa fa-linkedin"></span>Sign in with LinkedIn </a>
Sign in with Microsoft
Цвет btn-microsoft
Класс иконки fa-microsoft
<a class="btn btn-block btn-social btn-microsoft"> <span class="fa fa-microsoft"></span> Sign in with Microsoft </a>
Sign in with Odnoklassniki
Цвет btn-odnoklassniki
Класс иконки fa-odnoklassniki
<a class="btn btn-block btn-social btn-odnoklassniki"> <span class="fa fa-odnoklassniki"></span> Sign in with Odnoklassniki </a>
Sign in with OpenID
Цвет btn-openid
Класс иконки fa-openid
<a class="btn btn-block btn-social btn-openid"> <span class="fa fa-openid"></span>Sign in with OpenID </a>
Sign in with Pinterest
Цвет btn-pinterest
Класс иконки fa-pinterest
<a class="btn btn-block btn-social btn-pinterest"> <span class="fa fa-pinterest"></span> Sign in with Pinterest </a>
Sign in with Reddit
Цвет btn-reddit
Класс иконки fa-reddit
<a class="btn btn-block btn-social btn-reddit"> <span class="fa fa-reddit"></span>Sign in with Reddit </a>
Sign in with SoundCloud
Цвет btn-soundcloud
Класс иконки fa-soundcloud
<a class="btn btn-block btn-social btn-soundcloud"> <span class="fa fa-soundcloud"></span>Sign in with SoundCloud </a>
Sign in with Tumblr
Цвет btn-tumblr
Класс иконки fa-tumblr
<a class="btn btn-block btn-social btn-tumblr"> <span class="fa fa-tumblr"></span> Sign in with Tumblr </a>
Sign in with Twitter
Цвет btn-twitter
Класс иконки fa-twitter
<a class="btn btn-block btn-social btn-twitter"> <span class="fa fa-twitter"></span> Sign in with Twitter </a>
Sign in with Vimeo
Цвет btn-vimeo
Класс иконки fa-vimeo
<a class="btn btn-block btn-social btn-vimeo"> <span class="fa fa-vimeo"></span>Sign in with Vimeo </a>
Sign in with VK
Цвет btn-vk
Класс иконки fa-vk
<a class="btn btn-block btn-social btn-vk"> <span class="fa fa-vk"></span>Sign in with VK </a>
Sign in with Yahoo!
Цвет btn-yahoo
Класс иконки fa-yahoo
<a class="btn btn-block btn-social btn-yahoo"> <span class="fa fa-yahoo"></span> Sign in with Yahoo! </a>
Я думаю, отдельно создавать таблицу для иконок не нужно. Достаточно заменить класс «btn-social» на «btn-social-icon» и все!
Размеры кнопок и иконок
btn-lg большая кнопка
<a class="btn btn-social-icon btn-lg btn-facebook"> <span class="fa fa-facebook"></span> </a>
кнопка по умолчанию
<a class="btn btn-social-icon btn-facebook"> <span class="fa fa-facebook"></span> </a>
btn-sm маленькая кнопка
<a class="btn btn-social-icon btn-sm btn-facebook"> <span class="fa fa-facebook"></span> </a>
btn-xs очень маленькая кнопка
<a class="btn btn-social-icon btn-xs btn-facebook"> <span class="fa fa-facebook"></span> </a>
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Запуск модального окна bootstrap3 при открытии страницы
Основы bootstrap 3 для начинающих. Кнопки (12-й урок)
Как сделать поиск и сортировку в таблице на сайте
Бегущая строка в bootstrap3Похожие статьи
Цикл Foreach на PHP. Урок 13
Как вставить ссылку-якорь в HTML. Урок – 6 (для начинающих)
Оператор условия if-else для PHP. Урок 6
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222515 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187679 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186563
Подскажите пожалуйста, ставлю иконку Одноклассников, не отображается ОК, остальное все работает, где можно посмотреть в чем дело?
Вот тут
http://lipis.github.io/bootstrap-social/