1
Bloggerテンプレートのfont-awesomeアイコンの下にテキストを追加しようとしています。ここで私はフォントを追加するにはどうすればいいですか？
image of Look I want to achieve
を達成するために欲しいもののイメージがあるしかし、私は今
に示したように、私は、各アイコンの下clicableリンクを追加する方法にまで、これを達成するために管理しています二番目のイメージ？ 私が初心者なので、あなたがフォントファミリとそのスタイリングで私を助けてくれるなら、大きな助けになるでしょう。
p.s.私はblospotのホストされたブログでカスタムテンプレートを使用しています。 私は、次のコード実行しようとしている：
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
.sidebar-social {
margin: 0;
padding: 0;
}
.sidebar-social ul {
margin: 0;
padding: 5px;
}
.sidebar-social li {
\t text-align: center;
width: 31.9%;
margin-bottom: 3px!important;
background-color: #fff;
border: 1px solid #eee;
display: inline-block;
font-size: 10px;
}
.sidebar-social i {
display: block;
margin: 0 auto 10px auto;
\t width: 32px;
height: 32px;
margin: 10px auto 0;
line-height: 32px;
text-align: center;
font-size: 20px;
color: #444444;
}
.sidebar-social a i.fa-facebook:hover { color: #FF0000; }
.sidebar-social a i.fa-twitter:hover { color:#00ABE3 }
.sidebar-social a i.fa-instagram:hover { color:#FFD400 }
.sidebar-social a i.fa-pinterest:hover { color:#FF0000 }
.sidebar-social a i.fa-google-plus:hover { color:#cb2027 }
.sidebar-social a i.fa-flickr:hover { color:#FF57AE }
.sidebar-social a i.fa-500px:hover { color:#00ABE3 }
.sidebar-social a i.fa-youtube:hover { color:#FF1F25 }
.sidebar-social a i.fa-behance:hover { color:#FF57AE }<div class="sidebar-social">
<ul>
<li>
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a></li>
<li><a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
</li>
<li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
</li>
<li><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
</li>
<li><a href="URL-HERE" title="Behance" target="_blank" rel="nofollow"><i class="fa fa-behance"></i></a>
</li>
<li><a href="URL-HERE" title="flickr" target="_blank" rel="nofollow"><i class="fa fa-flickr"></i></a>
</li>
<li><a href="URL-HERE" title="YouTube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</li>
<li><a href="URL-HERE" title="500px" target="_blank" rel="nofollow"><i class="fa fa-500px"></i></a></li>
</ul>
</div>
ありがとうございました！チャームのように働いた！ もう少し手伝ってもらえますか？ マウスの上にマウスを置くと、アイコンの色が変わります。マウスが灰色の余白の内側にある場合でも色を変更する方法はありますか？ – NotAGeek
時間をくれてくれますか？ありがとうございました。 – ab29007
ok。私はこれがあなたが探していたものだと願っています。これがあれば、それを受け入れてupvoteできますか？辛抱強くありがとう – ab29007