だから、私はウェブ開発を始めたばかりで、フォントの素晴らしいアイコンをソーシャルプロフィールにリンクしようとしていますが、その方法がわかりません。 hrefタグを使用してみましたが、すべてのアイコンが必要なサイトではなく1つのサイトに移動しました。コードは次のとおりです。
<i class="fa fa-dribbble fa-4x"></i>
<i class="fa fa-behance-square fa-4x"></i>
<i class="fa fa-linkedin-square fa-4x"></i>
<i class="fa fa-Twitter-square fa-4x"></i>
<i class="fa fa-facebook-square fa-4x"></i>
これらのアイコンのそれぞれについて、それぞれのプロファイルに移動したいと思います。助言がありますか?
これらの要素をアンカータグでラップできます
このような
<a href="your link here"> <i class="fa fa-dribbble fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-behance-square fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-linkedin-square fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-Twitter-square fa-4x"></i></a>
<a href="your link here"> <i class="fa fa-facebook-square fa-4x"></i></a>
注:href
を目的のリンクに置き換えます。
リンクに追加したくない場合は、スパン内で囲むだけで問題ありません。
<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>
あなたのCSSでは、次のことができます:
#clickableAwesomeFont {
cursor: pointer
}
次に、Javaスクリプトで、クリックハンドラーを追加するだけです。
実際にnotリンクである場合、これははるかにクリーンであり、リンクを使用するとセマンティクスが変更され、その意味が乱用されると思います。
bootstrapをawesomeフォントで使用します。
<a class="btn btn-large btn-primary logout" href="#">
<i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>
これは私のユースケースに最適であることがわかりました。
<i class="btn btn-light fa fa-dribbble fa-4x" href="#"></i>
<i class="btn btn-light fa fa-behance-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-linkedin-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-Twitter-square fa-4x" href="#"></i>
<i class="btn btn-light fa fa-facebook-square fa-4x" href="#"></i>
Cssでクラスを追加します。
.fa-clickable {
cursor:pointer;
outline:none;
}
次に、クリック可能なfontawesomeアイコンにクラスを追加します(また、クリックを区別できるようにidを追加します)。
<i class="fa fa-dribbble fa-4x fa-clickable" id="epd-dribble"></i>
<i class="fa fa-behance-square fa-4x fa-clickable" id="epd-behance"></i>
<i class="fa fa-linkedin-square fa-4x fa-clickable" id="epd-linkedin"></i>
<i class="fa fa-Twitter-square fa-4x fa-clickable" id="epd-Twitter"></i>
<i class="fa fa-facebook-square fa-4x fa-clickable" id="epd-facebook"></i>
次に、jQueryにハンドラーを追加します
$(document).on("click", "i", function(){
switch (this.id) {
case "epd-dribble":
// do stuff
break;
// add additional cases
}
});