Как использовать социальные глификоны на веб-странице, реализованной в начальной загрузке?

Я не могу использовать значки глифов социальных сетей на веб-странице, реализованной в начальной загрузке. Я смог использовать обычные, такие как поиск, глобус и многое другое.

Вот как я использовал обычные:

<span class="glyphicons glyphicons-search"></span>

Как вы можете реализовать описанный выше метод для социальных глификонов?


twitter-bootstrap glyphicons
person maheshkumar    schedule 08.07.2014    source источник

Ответы (3)


arrow_upward
56
arrow_downward

глификоны, которые поставляются бесплатно с Bootstrap 3, являются подмножеством полная платная библиотека Glyphicons и не включает набор значков социальных сетей.

Вместо этого вы можете использовать Font Awesome, полностью поддерживаемую бесплатную альтернативу (и предпочтительный набор значков в Bootstrap 4), в котором есть бесплатный набор значков брендов:

введите здесь описание изображения

Font Awesome Version 4 — Бренды – демо в jsFiddle и фрагменты стека:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-bitbucket"></i>
<i class="fa fa-digg"></i>
<i class="fa fa-dropbox"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-foursquare"></i>
<i class="fa fa-github"></i>
<i class="fa fa-google"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-jsfiddle"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-reddit"></i>
<i class="fa fa-skype"></i>
<i class="fa fa-soundcloud"></i>
<i class="fa fa-spotify"></i>
<i class="fa fa-stack-exchange"></i>
<i class="fa fa-stack-overflow"></i>
<i class="fa fa-steam"></i>
<i class="fa fa-stumbleupon"></i>
<i class="fa fa-tumblr"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-vimeo-square"></i>
<i class="fa fa-vine"></i>
<i class="fa fa-windows"></i>
<i class="fa fa-wordpress"></i>
<i class="fa fa-yahoo"></i>
<i class="fa fa-youtube"></i>



<style type="text/css">
  .fa {
    padding: 4px;
    width: 200px;
  }

  .fa::before {
    display: inline-block;
    /* .fa-fw */
    width: 1.28571429em;
    text-align: center;
  }

  .fa::after {
    content: attr(class);
    font-family: consolas, monospace;
    font-size: 15px;
    /* .code */
    padding: 2px 4px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
    margin-left: 5px;
  }
</style>

Для Font Awesome 5 вы по-прежнему можете использовать бренды с отдельным набором бренды. :

<i class="fab fa-youtube"></i>
person KyleMit    schedule 08.07.2014
comment
Но будет ли вышеуказанный формат глификона работать для платформы Bootstrap? - person maheshkumar; 09.07.2014
comment
@ user3620928, определенно! Font Awesome был создан с учетом фреймворка начальной загрузки и имеет обратную совместимость с глификоном. Какое-то время глификоны даже не поставлялись с Bootstrap. Сейчас они вернулись, но большинство известных мне бутстрэпперов предпочитают FA. - person KyleMit; 09.07.2014
comment
У fontawseome много проблем с отображением в некоторых браузерах рекламы, которая не отображается в некоторых, особенно в IOS Safari и Chrome. - person Smith; 27.05.2015
comment
Обратите внимание, что в Font Awesome 5 значки брендов должны использовать класс fab, а не класс fa, поэтому теперь он должен быть <i class="fab fa-youtube"></i>. - person Mike Poole; 24.09.2018
comment
@MikePoole, спасибо, Майк. Я немного рассказал о различных версиях FA и BS, чтобы расширить обновления с момента исходного ответа. - person KyleMit; 24.09.2018

arrow_upward
21
arrow_downward

вставьте это в заголовок вашего кода

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

и просто пример вставки значка фейсбука

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

Полный список глиф-иконок можно найти на странице https://fortawesome.github.io/Font-Awesome/icons/

person Nanoripper    schedule 17.10.2015

arrow_upward
0
arrow_downward

При использовании font-awesome 5 классы изменились.

Теперь у вас больше префиксов, чем просто fa: fab, fas, far, fal.

Например, чтобы показать логотип твиттера, вам нужно что-то вроде этого

<i class="fab fa-twitter"></i>.

Подробнее о переходе с font-awesome 4 на 5 можно прочитать здесь .

person Radu Diță    schedule 16.05.2018