Хотите сделать Font Awesome значками clickable

Итак, я новичок в веб-разработке, и я пытаюсь связать шрифты с удивительными значками в моих социальных профилях, но я не уверен, как это сделать. Я попытался использовать тег href, но он заставил все значки взять меня на один сайт, а не тот, который я хотел. Вот код:

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

Я хотел бы, чтобы каждый из этих значков переходил к их соответствующим профилям. Любые предложения?

Ответы

Ответ 1

Вы можете обернуть эти элементы в тег привязки

как это

<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 на нужную ссылку.

Ответ 2

Если вы не хотите, чтобы он добавлял его в ссылку, вы можете просто заключить его в промежуток, и это сработает.

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

в вашем css, вы можете:

#clickableAwesomeFont {
     cursor: pointer
}

Затем в java script вы можете просто добавить обработчик кликов.

В тех случаях, когда это действительно не ссылка, я думаю, что это намного чище, и использование ссылки изменило бы ее семантику и злоупотребляло ее значением.

Ответ 3

Использование бутстрапа с шрифтом awesome.

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

Ответ 4

Я нашел, что это работает лучше всего для моего варианта использования:

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

Ответ 5

В своем CSS добавьте класс:

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

Затем добавьте класс к активируемым кликабельным значкам (также идентификатору, чтобы вы могли различать клики):

 <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
    }
});

Ответ 6

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