Affichage de l'icône Bootstrap avant le texte avec CSS affiche le code à la place icône

Je dois afficher les Glyphicons bootstrap avant l'élément dans lequel la classe .normal-text a été utilisée: J'essaie avec ce qui suit mais il montre le code à la place de l'icône.Affichage de l'icône Bootstrap avant le texte avec CSS affiche le code à la place icône

.normal-text{ 
 
    border-left-width: 1px !important; 
 
    font-size: 110% !important; 
 
    color: #100cce; 
 
    font-family: 'Book Antiqua'; 
 
} 
 
.normal-text::after{ 
 
    content: '<span class="glyphicon glyphicon-pencil"></span>' 
 
}

<blockquote class="normal-text"> Some Text </blockquote>

aide nécessaire dans ce s'il vous plaît.

Source

2017-05-17 Abdul Rahman

Le glypicon doit être avant l'élément, non? – athi

Utilisez unicode à la place. content:'' traitera le bloc de code comme un texte.

.normal-text{ 
 
    border-left-width: 1px !important; 
 
    font-size: 110% !important; 
 
    color: #100cce; 
 
    font-family: 'Book Antiqua'; 
 
} 
 
.normal-text::after{ 
 
    content: "\270f"; 
 
    font-family: 'Glyphicons Halflings'; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<blockquote class="normal-text"> Some Text </blockquote>

Source

2017-05-17 05:46:26

c'est génial, mais que faire si je dois mettre une image html à la place du code de l'icône? –

vous pouvez écrire comme ceci '' assurez-vous de donner css à img tage comme 'display-inline-block' pour apparaître dans la même ligne. –

@AbdulRahman ce post [comment-mettre-une-image-en-div-avec-css] (http://stackoverflow.com/questions/10829675/how-to-put-an-image-in-div -with-css) vous aidera. –

Vous ne pouvez pas afficher une telle icône. Vous devriez utiliser icon unicode avec sa famille de polices.

.normal-text{ 
 
    border-left-width: 1px !important; 
 
    font-size: 110% !important; 
 
    color: #100cce; 
 
    font-family: 'Book Antiqua'; 
 
} 
 
.normal-text::after{ 
 
    content: "\270f"; 
 
    font-family: 'Glyphicons Halflings'; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<blockquote class="normal-text"> Some Text </blockquote>

Source

2017-05-17 05:46:10

Vous ne pouvez pas inclure dans span tag CSS content property.

La propriété CSS de contenu est utilisée avec les pseudo-éléments :: before et :: after pour générer du contenu dans un élément.

.normal-text{ 
 
border-left-width: 1px !important; 
 
font-size: 110% !important; 
 
color: #100cce; 
 
font-family: 'Book Antiqua'; 
 
} 
 
.normal-text::after{ 
 
content: ' \00270e ' 
 
}

<blockquote class="normal-text"> Some Text </blockquote>

Source

2017-05-17 05:48:34 frnt

Je pense que cela vous aidera. make html comme indiqué ci-dessous et pas besoin de après css

<blockquote class="normal-text"><span class="glyphicon glyphicon-pencil"></span> Some Text </blockquote>

vérifier ce lien: https://jsfiddle.net/vt3d7pLv/

Source

2017-05-17 05:54:57 zero

yap vous avez raison mais j'ai peu de scénario différent, c'est pourquoi je vais utiliser comme ça ... de toute façon, merci, il a été répondu. –

donc vous pouvez aller avec ce css .normal-text :: after { contenu: "\ 270f"; famille de polices: 'Glyphicons Halflings'; } – zero

Je pense que cela vous aidera.

@font-face { 
 
    font-family: 'Glyphicons Halflings'; 
 
    src: url('../fonts/glyphicons-halflings-regular.eot'); 
 
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),   url('../fonts/glyphicons-halflings-regular.woff') format('woff'), 
 
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); 
 
} 
 

 
.glyphicon:before { 
 
    content: "\e008"; 
 
    padding-right:10px; 
 
    font-size:24px; 
 
    float:left; 
 
} 
 
.glyphicon > p { 
 
    float:left; 
 
    font-size:24px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<span class="glyphicon"><p>User</p></span>

Source

2017-05-17 06:51:15

Ceci est un code génial, je vais utiliser ce code, car il a les polices nécessaires pour les icônes. c'est génial ... –

Merci d'accepter ma réponse –

Affichage de l'icône Bootstrap avant le texte avec CSS affiche le code à la place icône

Répondre

Questions connexes