IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Bouton et pseudo-classe before avec Icomoon


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    chomeur
    Inscrit en
    Juillet 2014
    Messages
    128
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : chomeur

    Informations forums :
    Inscription : Juillet 2014
    Messages : 128
    Points : 0
    Points
    0
    Par défaut Bouton et pseudo-classe before avec Icomoon
    Bonjours, j'ai étais voir ce tuto

    http://www.paulund.co.uk/playground/...ons_no_images/

    donc j'ai questions

    pour quoi dans les bouttons Misc Symbols le warning beffore n'affiche pas car j'aimerais le mettre le boutton warning

    et l'autre question

    https://icomoon.io/app/#/select

    pour quoi si je mets des icommoon a la place de beffore il n'affiche pas les icommoon

    es ce que c'est parce beffore c'est pour mettre un boutton et non des icommon

    car icoomoon c juste une image qui n'appara^t pas dans le boutton beffor

    et c'est pour ca il n'affiche pas

    merci

    voilà mon css

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
     
     
    .buttons
    {
    display: inline-block;
    background: #eeeeee; /* Old browsers */
    background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #eeeeee 0%,#eeeeee 100%); /* W3C */
    border: 1px solid #a1a1a1;
    padding: 0 2em;
    margin: 0.5em;
    font: bold 1em/2em Arial, Helvetica;
    text-decoration: none;
    color: #333;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    }
     
    .buttons:before
    {
    float: left;
    width: 1em;
    text-align: center;
    font-size: 1.7em;
    margin: 0 0.5em 0 -1em;
    padding: 0 .2em;
    pointer-events: none;
    }
     
     
    /*Formulaires*/
    .add:before    { content: "\271A"; }
    .edit:before   { content: "\270E"; }
    .delete:before { content: "\2718";}
    .save:before   { content: "\2714";}
    .email:before  { content: "\2709";}
    .cross:before  { content: "\2716"; }
     
    .up_arrow:before         { content: "\2191"; }
    .warning:before            { content: "\26A0"; }
     
     
     
    @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-"]{
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
    	margin-top:10px;
     
        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .icon-connexion_deconnexion:before {
    	content: "\e60a";
    }
    .icon-liste_membre:before {
    	content: "\e60b";
    }
    .icon-liste_equipe:before {
    	content: "\e609";
    }


    je pense c 'est juste parce dans le css il y a icon_ et c'est pour ca que mon image ne veux pas s'afficher

    merci

    par exemple:

    là le up_arrow c'est bon il m'affiche l'image :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a class="buttons up_arrow" href="/forum-voirmessage.html?fid=1&tid=368&num=1#top" title="En haut">Remonter</a>


    mais si je mets

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a class="buttons icon-remonter" href="/forum-voirmessage.html?fid=1&tid=368&num=1#top" title="En haut">Remonter</a>

    mon image ne s'affiche plus


    merci de votre aide

  2. #2
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    Bonjour,

    Quelques remarques :
    1. Désolé d'avance si c'est malgré vous, mais votre français est difficile à comprendre.
    2. Posez une question par sujet.
    3. Soyez précis dans vos explications.


    Merci d'avance :)

    Pour vous répondre :

    j'aimerais le mettre le boutton warning
    Vous voulez mettre un symbole comme ça : ⚠ () ?

    si je mets class="icon-remonter mon image ne s'affiche plus
    Mais est-ce que la classe existe dans votre CSS ?

Discussions similaires

  1. Réponses: 6
    Dernier message: 18/08/2009, 08h13
  2. Afficher un bouton appartenant à une classe sur une form
    Par Julien_riquelme dans le forum Composants VCL
    Réponses: 2
    Dernier message: 05/09/2005, 13h10
  3. Réponses: 6
    Dernier message: 27/07/2005, 09h06
  4. Pouvoir gérer les actions des boutons dans une classe
    Par Cyborg289 dans le forum Composants
    Réponses: 2
    Dernier message: 08/07/2005, 12h08
  5. Réponses: 22
    Dernier message: 05/07/2005, 00h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo