Как построить социальный бар и поместить его кнопки?

Question

Я пытаюсь создать базовый бар, содержащий 5 кнопок, каждая кнопка состоит из значка и ниже текста, который описывает значок. Я хочу, чтобы все изображения были в одной строке, а описания будут внизу.

<a href="tel:036781223333" title ="call us"><img src=phone.png />call office </a> 
<a href= "http://www.bgasgdhen.com/" title = "website"><img src=circle.png />link to website </a> 
<a href= "advbagsgadron.vcf" title = "add to contacts"><img src=book.png />add to contacts </a> 

в этом коде, например, «офис вызова» должен быть ниже первого IMG, «ссылка на сайт» ниже второго и так далее, но он пишет описание, но описание появляется в той же строке с значки, каждое описание рядом с символом itws. Вы можете помочь? ТНХ

Answer 1

Делают это так: Иконки/ссылки размещаются в списке, HTML очищается, и я добавил немного CSS, чтобы показать, как это может выглядеть

ul { 
 
    list-style-type: none; 
 
    } 
 
li { 
 
    display: inline-block; 
 
    margin: 1em; 
 
    } 
 
li a { 
 
    display: block; 
 
    text-align: center; 
 
    } 
 
li a img { 
 
    margin: 0 auto; 
 
    display: block; 
 
    width: 3em; 
 
    height: 3em; 
 
    }

<ul> 
 
<li><a href="tel:036781223333" title="call us"><img src=phone.png><br>call office</a></li> 
 
<li><a href="http://www.bgasgdhen.com/" title="website"><img src=circle.png><br>link to website</a></li> 
 
<li><a href="advbagsgadron.vcf" title="add to contacts"><img src=book.png><br>add to contacts</a></li> 
 
</ul>

Answer 2

Я бы тоже изменил HTML. Поместите только текст там, потому что изображения не имеют семантического значения. С помощью CSS вы можете показывать значки, и вам даже не нужен элемент для этого. Просто используйте псевдоэлемент ::before.

nav.social { 
 
    text-align: center; 
 
} 
 
nav.social a { 
 
    display: inline-block; 
 
    padding: 3px; 
 
} 
 
nav.social a::before { 
 
    content: ""; 
 
    display: block; 
 
    height: 32px; 
 
    background: url(http://www.phonebook.com/favicon.ico) top center no-repeat; 
 
} 
 
nav.social a.website::before { 
 
    background-image: url(http://stackoverflow.com/favicon.ico); 
 
} 
 
nav.social a.vcard::before { 
 
    background-image: url(https://en.wikipedia.org/favicon.ico); 
 
}

<nav class="social"> 
 
    <a class="phone" href="tel:036781223333" title="call us">call office</a> 
 
    <a class="website" href="http://www.bgasgdhen.com/" title="website">link to website </a> 
 
    <a class="vcard" href="advbagsgadron.vcf" title="add to contacts">add to contacts </a> 
 
</nav>