Question

我创建了以下内容：

        <div style="margin-top: 1.2em">
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        </div>

有人可以告诉我如何制作它所以点击其中一个图标或下面的一个单词会把我带到一个链接吗？

我想做的是让图标显示如下：

 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx

  Home       Admin     Setting

因此，当我点击图标顶部到下方单词底部的任何地方时，这与单击以下内容相同：

 <a href="/home">Home</a>
 <a href="/admin">Admin</a>
 <a href="/setting">Setting</a>

链接。

更新

我相信也许我需要一个使用DIV的解决方案。我试着给了我两个答案，两个都让图标显得垂直。第二个答案可能不是主意，因为它有相同链接的多个href。希望有人可以帮助解决另一个问题。

Answer 1

不需要div。这样的事情应该有效。 fiddle

<a href="/home" class="icon-block">
    <i class="icon-home icon-4x"></i>
    <span>Home</span>
</a>
<a href="/admin" class="icon-block">
    <i class="icon-th icon-4x"></i>
    <span>Admin</span>
</a>
<a href="/settings" class="icon-block">
    <i class="icon-cog icon-4x"></i>
    <span>Settings</span>
</a>

CSS

a.icon-block {
        display:inline-block;
        width:10em;
        float:left;
        text-align:center;
    }

    a.icon-block i,
    a.icon-block span {
        display:block;
        width:100%;
        clear:both;
    }

Answer 2

尝试：

<div style="margin-top: 1.2em">
    <a href="/home">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
        <br />
        <span class="normal">Home</span>
    </a>
    <a href="/admin">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
        <br />
        <span class="normal">Admin</span>
    </a>
    <a href="/setting">
        <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
        <br />
        <span class="normal">Setting</span>
    </a>
</div>

然后在你的css中，给.normal类一个不同的字体系列

.normal{
    font-family: "Your Font";
}

Answer 3

试试这个Div版本。

<div style="margin-top: 1.2em">
    <div class="go-inline">
        <div>
            <a href="/home">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-home icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/home">
                <span class="normal">Home</span>
            </a>
        </div>
    </div>
    <div class="go-inline">
        <div>
            <a href="/admin">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-th icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/admin">
               <span class="normal">Admin</span>
            </a>
        </div>
    </div>
    <div class="go-inline">
        <div>
            <a href="/setting">
                <i style="margin-right: 0.5em; color: #EEEEEE;" class="icon-cog icon-4x"></i>
            </a>
        </div>
        <div class="go-middle">
            <a href="/setting">
                <span class="normal">Setting</span>
            </a>
        </div>
    </div>
</div>

和css类

go-middle{ text-align:center;}
go-inline { display:inline-block; vertical-align:top;}

P / S。一些css / div结构编辑会很好。尝试用自己的风格构建它。 = d

如何将href添加到其下方的fontawesome图标和单词？

3 个答案: