How to build a social bar and to position it's buttons? - css

Question

I'm trying to build a basic bar that contains 5 buttons, every button is consist of an icon and below text that describes the icon.
I want that all the images will be on the same line and the descriptions will be underneath.
<img src=phone.png />call office
<img src=circle.png />link to website
<img src=book.png />add to contacts
in this code for example, "call office" should be below the first img, "link to website" below the second and so on but it writes the description but the description appears in the same line with the icons, every description next to itws icon.
can you help?
thx

Answer 1

Do it like this:
The icons/links are placed in a list, the HTML is cleaned up, and I've added a bit of CSS to show how it can look
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><img src=phone.png><br>call office</li>
<li><img src=circle.png><br>link to website</li>
<li><img src=book.png><br>add to contacts</li>
</ul>

Answer 2

I would change the HTML as well. Put just the text in there, because the images have no semantic value. Using CSS you can show the icons, and you don't even need an element for that. Just use the ::before pseudo-element.
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:[phone]" 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>