Sie möchten Font Awesome-Symbole anklickbar machen

Ich bin also neu in der Webentwicklung und versuche, fantastische Symbole für Schriftarten mit meinen sozialen Profilen zu verknüpfen, bin mir aber nicht sicher, wie das geht. Ich habe versucht, ein Href-Tag zu verwenden, aber alle Symbole brachten mich zu einer Seite anstatt zu der, die ich wollte. Hier ist der Code:

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

Ich möchte, dass jedes dieser Symbole zu ihren jeweiligen Profilen geht. Irgendwelche Vorschläge?

Sie können diese Elemente in ein Anker-Tag einschließen

so was

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

Hinweis: Ersetzen href="your link here" mit Ihrem Wunschlink zB href="https://www.stackoverflow.com".

Wenn Sie nicht möchten, dass es zu einem Link hinzugefügt wird, können Sie es einfach in eine Spanne einschließen, und das würde funktionieren.

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

in Ihrem CSS, dann können Sie:

#clickableAwesomeFont {
     cursor: pointer
}

Dann können Sie in Java-Skript einfach einen Klick-Handler hinzufügen.

In Fällen, in denen es tatsächlich so ist nicht ein Link, ich denke, das ist viel sauberer und die Verwendung eines Links würde seine Semantik ändern und seine Bedeutung missbrauchen.

Verwenden von Bootstrap mit einer fantastischen Schriftart.

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

Ich fand, dass dies für meinen Anwendungsfall am besten funktionierte:

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

Please use Like below.
<a style="cursor: pointer" **(click)="yourFunctionComponent()"** >
<i class="fa fa-dribbble fa-4x"></i>
 </a>

Das Obige kann verwendet werden, damit das fa-Symbol angezeigt wird, und auch auf die Klickfunktion können Sie Ihre Logik schreiben.

Fügen Sie in Ihrem CSS eine Klasse hinzu:

.fa-clickable {
    cursor:pointer;
    outline:none;
}

Fügen Sie dann die Klasse zu den anklickbaren Fontawesome-Symbolen hinzu (auch eine ID, damit Sie die Klicks unterscheiden können):

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

Fügen Sie dann einen Handler in Ihrer jQuery hinzu

$(document).on("click", "i", function(){
    switch (this.id) {
        case "epd-dribble":
            // do stuff
            break;
        // add additional cases
    }
});

             <a href="#"><i class="fab fa-facebook-square"></i></a> 
             <a href="#"><i class="fab fa-twitter-square"></i></a> 
             <a href="#"><i class="fas fa-basketball-ball"></i></a> 
             <a href="#"><i class="fab fa-google-plus-square"></i></a>


              All you have to do is wrap your font-awesome icon link in your HTML 
                               with an anchor tag.
        Following this format:
                   <a href="Link here"> <font-awesome icon code> </a>