web-dev-qa-db-ja.com

Font Awesomeアイコンをクリック可能にしたい

だから、私はウェブ開発を始めたばかりで、フォントの素晴らしいアイコンをソーシャルプロフィールにリンクしようとしていますが、その方法がわかりません。 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>

これらのアイコンのそれぞれについて、それぞれのプロファイルに移動したいと思います。助言がありますか？

htmlfont-awesome
35
twhite96

これらの要素をアンカータグでラップできます

このような

<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を目的のリンクに置き換えます。

55
shyammakwana.me

リンクに追加したくない場合は、スパン内で囲むだけで問題ありません。

<span id='clickableAwesomeFont'><i class="fa fa-behance-square fa-4x"></span>

あなたのCSSでは、次のことができます：

#clickableAwesomeFont {
     cursor: pointer
}

次に、Javaスクリプトで、クリックハンドラーを追加するだけです。

実際にnotリンクである場合、これははるかにクリーンであり、リンクを使用するとセマンティクスが変更され、その意味が乱用されると思います。

25
Neo M Hacker

bootstrapをawesomeフォントで使用します。

<a class="btn btn-large btn-primary logout" href="#">
        <i class="fa fa-sign-out" aria-hidden="true">Logout</i>
</a>
8
Puneeth Reddy V

これは私のユースケースに最適であることがわかりました。

<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>
2
Ryan

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
    }
});
0
Eric D'Souza