html - 在链接图标下添加文本

Question

我有这个嵌入到图标中的链接，我想在图标本身下方添加描述文本。

示例: 电子邮件图标，在其下方我将有“电子邮件”

这是我目前的链接，我想给它添加标题“电子邮件”

<a title="Email"  class="icon-envelope" data-bind="attr: { 'href': 'mailto:' + Email() }"></a>

我如何结合使用 css 和 html 来完成此操作？

Answer 1

HTML

<a title="Email" class="icon-envelope" data-bind="attr: { 'href': 'mailto:' + Email() }">Email</a>

CSS

.icon-envelope {
    display:block; 
    width:100px;
    height:100px;
    padding:110px 0 0 0;
    background: url(http://placekitten.com/100/100) no-repeat;
    text-align:center;
}

JSFIDDLE

http://jsfiddle.net/GKC9e/