BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Bootstrap » Уроки Bootstrap 3.0 для начинающих. Иконки и кнопки социальных сетей (11-й урок)

Уроки Bootstrap 3.0 для начинающих. Иконки и кнопки социальных сетей (11-й урок)

2016-07-14 / Вр:14:15 / просмотров: 4063

Иконки и кнопки социальных сетей bootstrap3

Наконец-то решил добавить статью в рубрику Bootstrap 3.
Что же в этой статье вас ждет?
Я расскажу и покажу, как создать красивые иконки и кнопки социальных сетей, используя шрифты иконок Font Awesome

С чего начать?

  1. Подключите Font Awesome к вашему проекту. Если вы не помните, как это сделать, почитайте вот эту статью.
  2. Скачайте bootstrap-social.css и закиньте его в папку «CSS». Подключите bootstrap-social.css (добавьте код между тегами <head>здесь код</head>):
<link href="css/bootstrap-social.css" rel="stylesheet">
  1. Добавление кнопки или иконки:

Кнопка (btn-social)

<a class="btn btn-block btn-social btn-twitter">
<span class="fa fa-twitter"></span> Sign in with Twitter
</a>

Результат будет вот таким:

Иконки и кнопки социальных сетей bootstrap3

Иконка (btn-social-icon)

<a class="btn btn-social-icon btn-twitter">
<span class="fa fa-twitter"></span>
</a>

Результат будет вот таким:

Иконки и кнопки социальных сетей bootstrap3

Попробую все объяснить.

Желтым цветом я выделит тот кусок CSS класса, который отвечает за цвет кнопки.
Зеленым – тот кусок CSS класса, который отвечает за саму кнопку:

Иконки и кнопки социальных сетей bootstrap3

Основной макет и схема у вас есть. Теперь пробуйте подставлять к коду CSS классы из таблицы.

Список внешнего вида кнопок и иконок

Sing in with App.net

Цвет btn-adn
Класс иконки fa-adn

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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

Иконки и кнопки социальных сетей bootstrap3

<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>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Уроки Bootstrap 3.0 для начинающих. Иконки и кнопки социальных сетей (11-й урок)

  1. Подскажите пожалуйста, ставлю иконку Одноклассников, не отображается ОК, остальное все работает, где можно посмотреть в чем дело? :|

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Вот тут
    http://lipis.github.io/bootstrap-social/

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 750
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4136