Социальные кнопки с использованием Twitter Bootstrap 3

Я пытаюсь добавить некоторые социальные кнопки на свой сайт, стиль правилен, но значки не появляются. Я предполагаю, что это должна быть проблема с шрифтом Awesome, как с тем, откуда появляются значки, но я не вижу, где я ошибся.

Я связал его в голове так:

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

и кнопки в теле:

<div id="contact_page">
  <div class="container">
    <div class="row">
      <div class="span4 pull-center">
        <button class="btn btn-twitter"><i class="icon-twitter"></i> | Connect with Twitter</button><br>
        <button class="btn btn-linkedin"><i class="icon-linkedin"></i> | Connect with LinkedIn</button><br>
      </div>
    </div>
  </div> 
</div>

ОТВЕТЫ

Ответ 1

Так как вы пытаетесь использовать Font Awesome 4.0.3, вам придется использовать последние имена классов, чтобы иметь право. Вместо icon-* вам придется использовать fa fa-* (больше изменений в официальных официальных примерах)

В вашем случае измените <i> на:

<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>

Если вы хотите иметь что-то более продвинутое, чем просто значок и простой разделитель, вы можете проверить Social Buttons for Bootstrap (Отказ от ответственности: я создатель), который отлично работает с последними версиями, и он очень гибкий, если вы хотите добавить больше.

Social Buttons for Bootstrap Preview