explication sur tuto icommoon

ivan94
Les bases HTML/CSS

bonjours, je viens de regarder la vidéo

https://www.youtube.com/watch?v=SkcrDBmAQfw

vers 6 mn 40 s

j'ai mis html

<ul>
   <li><a href="#" class="signin">M'inscrir</a></li>
   <li><a href="#" class="mars">Aller sur mars</a></li>
   <li><a href="#" class="sound">Monter le son</a></li>
</ul>

et le css 

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?afrei4');
    src:url('fonts/icomoon.eot?#iefixafrei4') format('embedded-opentype'),
        url('fonts/icomoon.woff?afrei4') format('woff'),
        url('fonts/icomoon.ttf?afrei4') format('truetype'),
        url('fonts/icomoon.svg?afrei4#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-U:before {
    content: "\e600";
}
.icon-F:before {
    content: "\e601";
}
.icon-S:before {
    content: "\e602";
}

et le souci j'ai voulu mettre html

<li><a href="#" data-icon"u">M'inscrir</a></li>
le u n'apparaît pas sur mes 3 liens
es ce quelqu'un peut me réexplique tout pour comprendre comment on met u sur mes 3 lien et j'ai qu'a changer pour les 2 autres lien avec les content e601 par 602 etc

merci de m'expliquer etape par étape ou je coinces

je rédisj'ai essayer de le faire voilà mon code 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
<style type="text/css">
<!--
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?afrei4');
    src:url('fonts/icomoon.eot?#iefixafrei4') format('embedded-opentype'),
        url('fonts/icomoon.woff?afrei4') format('woff'),
        url('fonts/icomoon.ttf?afrei4') format('truetype'),
        url('fonts/icomoon.svg?afrei4#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon-signin:before, icon-fuse:before,.icon-mars:before {
    speak: none;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    font-size:16px;
    margin-right:10px;

}
[data_icon] {
    font-family: 'icomoon';
    content:attr(data_icon);
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon-signin:before {
    content: "\e600";
    color:#CCCCCC;
}
.icon-fuse:before {
    content: "\e601";
    color:#FF0000;
}
.icon-mars:before {
    content: "\e602";
    color:#00FF00;
}
-->
</style></head>
<body>
    <div id="navigation">
        <ul class="menu_horizontal">

                                     <li class="icon-signin"><a href="/membre-inscription.html">Inscription</a></li>

                                     <li class="icon-signin"><a href="/membre-inscription.html">Connexion</a></li> 

                                     <li class="icon-mars"><a href="/membre-inscription.html">Recherche</a></li>

                                     <li class="icon-fuse"><a href="/membre-inscription.html">Liste des membres</a></li>

                                     <li class="icon-mars"><a href="/membre-inscription.html">Liste des equipes</a></li>

                                     <li class="icon-fuse"><a href="/membre-inscription.html">FAQ</a></li>
    </ul>          

            </div>
    </div></body>
</html>

es ce code et bien fait

je pense qu'on laisse ce css
@font-face

et ce css [data_icon] je peux le supprimer
vous me direz si j'ai bien fait ou sil y a une amélioration avant que je mets sur tout les pages

3 réponses

Wapaca

Salut,

A ta place au lieu de faire :

<li class="icon-fuse"><a href="/membre-inscription.html">FAQ</a></li>

Je ferais : 

<a href="/membre-inscription.html"><li class="icon-fuse"></li>FAQ</a>

Ou : 

<li><a href="/membre-inscription.html"><span class="icon-fuse"></span>FAQ</a></li>

Là comme ça je ne vois pas comment résoudre ton bug, à la limite si tu peux foutre ton code sur une page internet je pourrai le débug et t'aider.
Et si tu te sens chaud, je te conseille d'utiliser bootstrap 3 pour faire tes sites, ça permet de faire facilement du responsive et il contient des glyphicons déjà intégré : http://getbootstrap.com/components/#glyphicons

ivan94
Auteur

merci pour les conseilles pour lien on peut pas telecharger gratuitement

Wapaca

Si tu peux, tu as 3 types de licences dont une gratuite, il suffit de descendre un peu sur la page ^^

Mais bootstrap 3 les intègres directement.