在菜单中的图标下方添加文字

Question

我是CSS和html的新手。我创建了一个菜单栏，其中包含8个图标。我想在每个图标下面添加文本，但无论我在HTML中添加文本的哪个位置，都会让一切都变得混乱。我已经尝试了所有我能想到的东西。任何帮助将不胜感激。谢谢！

<div class="icon-bar">

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/ria-
stroke.png"></span>

<span id="onhover"><img class="esm-icon"         
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
ria.png"></span>
</span></a>

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/yoga-
stroke.png"></span>

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
yoga.png"></span>
</span></a>

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/abit-
stroke.png"></span>
<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
abit.png"></span>
</span></a>

<a href="#"><span id="surround">
<img class="esm-icon-active" src="http://treehouserecoverypdx.com/wp-
content/uploads/2017/05/circle-esm.png">
</span></a>

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/pg-
stroke.png"></span>

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
pg.png"></span>
</span></a>

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/lit-
stroke.png"></span>

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
lit.png"></span>
</span></a>

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
 src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/1on1-
stroke.png"></span>  

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
1on1.png"></span>
</span></a>

<a href="#"><span id="surround">
<span id="initial"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/education-
stroke.png"></span>

<span id="onhover"><img class="esm-icon" 
src="http://treehouserecoverypdx.com/wp-content/uploads/2017/05/circle-
education.png"></span>
</span></a>

</div>

这是CSS：

#surround{
display:inline-block;
width:12.2%;
}
#onhover {
display: none;
}
#surround:hover span[id="initial"] {
display: none;
}
#surround:hover span[id="onhover"] {
display: block;
}

.icon-bar {
width: 100%;
overflow: hide;
padding-top: 7px;
background-color:black;
padding-bottom:100px;
}

.icon-bar a {
float: right;
width: 12.5%;
text-align: center;
transition: all 0.3s ease;
color: white;
font-size: 12px;
}

.esm-icon {
opacity:0.5!important;
min-width: 55px;
max-width: 55px;
display: block;
margin: auto;
border-radius: 100%;
border: 2px solid transparent;
}


.esm-icon-active {
opacity:1!important;
min-width: 55px;
max-width: 55px;
display: block;
margin: auto;
border-radius: 100%;
border: 2px solid transparent;
}