Comment puis-je ajouter un href d'un fontawesome icône et le mot en dessous?

J'ai créé le suivant:

        <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>

Quelqu'un peut-il me dire comment je peux faire en sorte cliquant sur une de ces icônes, ou un mot ci-dessous, il me prend pour un lien?

Ce que j'aimerais faire, c'est de faire en sorte que les icônes apparaissent comme ceci:

 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx
 xxxxxx     xxxxxx     xxxxxx

  Home       Admin     Setting

De sorte que lorsque je clique n'importe où à partir du haut de l'icône au bas de les mots ci-dessous que c'est la même chose que de cliquer sur un:

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

lien.

Mise à jour

Je crois peut-être que j'ai besoin d'une solution qui utilise des DIVs. J'ai essayé les deux réponses donné à moi et à la fois de rendre les icônes apparaissent à la verticale. La deuxième réponse est peut-être pas idée comme il a plusieurs hrefs pour le même lien. J'espère que quelqu'un peut aider avec une autre réponse.

InformationsquelleAutor | 2013-09-01
  1. 3

    Pas de divs nécessaire. Quelque chose comme cela devrait fonctionner. violon

    <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;
    }
    InformationsquelleAutor Jbird
  2. 1

    Essayer:

    <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>

    Et puis dans votre css, donnez-le .classe normale une police différente de la famille

    .normal{
    font-family: "Your Font";
}
    • J'ai essayé cela, mais l'espacement est très mauvais. Les icônes s'affichent dans une colonne et les mots pour la Maison, l'Admin et le Réglage apparaissent à gauche ou à droite de l'icône. Je pense que j'ai besoin d'une solution qui utilise les DIVs mais je ne suis pas sûr de savoir comment le mettre en œuvre.
    InformationsquelleAutor Thought Space Designs
  3. 1

    Essayer cette Div version.

    <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>

    et classe css

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

    P/s. un peu de css/div structure d'édition sera très bien.
    Essayez de construire votre propre style. =D

    • Désolé, mais cette solution ne fonctionne pas du tout. Les icônes apparaissent ci-dessous les uns des autres et ne sont pas horizontaux 🙁
    • Essayez de nouveau, je l'ai montée.
    InformationsquelleAutor Kooki3