web-dev-qa-db-ja.com

Twitterを使用したソーシャルボタンBootstrap 3

ウェブサイトにソーシャルボタンを追加しようとしています。スタイルは正しいのですが、アイコンが表示されません。これはFont 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>
htmlcsstwitter-bootstrapbutton
16
user2953989

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

38
Lipis

おそらくこれらのクラスはありません。

これを確認してください： Bootstrapのソーシャルボタン

またはこの例： フォントが素晴らしいソーシャルメディアアイコン

4
Norbert Pisz