Wil je Font Awesome-pictogrammen klikbaar maken

Dus ik ben nieuw in webontwikkeling en ik probeer geweldige lettertypepictogrammen te koppelen aan mijn sociale profielen, maar ik weet niet hoe ik dat moet doen. Ik heb geprobeerd een a href-tag te gebruiken, maar alle pictogrammen brachten me naar één site in plaats van degene die ik wilde. Hier is de 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>

Ik wil dat elk van deze pictogrammen naar hun respectievelijke profielen gaat. Suggesties?

Antwoord 1, autoriteit 100%

U kunt die elementen in een ankertag plaatsen

zoals dit

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

Opmerking: vervang href="your link here"door je gewenste link, b.v. href="https://www.stackoverflow.com".

Antwoord 2, autoriteit 46%

Als je niet wilt dat het aan een link wordt toegevoegd, kun je het gewoon binnen een bereik plaatsen en dat zou werken.

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

in je css, dan kun je:

#clickableAwesomeFont {
     cursor: pointer
}

Dan kun je in javascript gewoon een klikhandler toevoegen.

In gevallen waar het eigenlijk geeneen link is, denk ik dat dit veel schoner is en het gebruik van een link zou de semantiek veranderen en de betekenis ervan misbruiken.

Antwoord 3, autoriteit 10%

Bootstrap gebruiken met een geweldig lettertype.

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

Antwoord 4, autoriteit 7%

Ik ontdekte dat dit het beste werkte voor mijn gebruik:

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

Antwoord 5

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

Het bovenstaande kan worden gebruikt zodat het fa-pictogram wordt weergegeven en ook aan
met de klikfunctie zou je je logica kunnen schrijven.

Antwoord 6

Voeg een klas toe in je css:

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

Voeg vervolgens de klasse toe aan de klikbare lettertypepictogrammen (ook een id zodat u de klikken kunt onderscheiden):

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

Voeg vervolgens een handler toe aan uw jQuery

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

Antwoord 7

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