CSS: Comment faire pour afficher l'icône de l'image avant chaque h3 dans le CSS?
J'ai wordpress latéral avec:
<h3 class="widget-title">TITLE OF SIDEBAR</h3>
et j'ai besoin de afficher une petite icône avant de "TITRE DE la barre latérale. Puis-je faire avec CSS?
Ou je dois les ajouter manuellement l'image dans le code? comme:
<h3 class="widget-title"><img src="">TITLE OF SIDEBAR</h3>
Vous pouvez faire cela avec réglage de l'image comme image d'arrière-plan et utiliser
background-position
ainsi.OriginalL'auteur Nikdonevi Kdojsem | 2013-06-08
Vous devez vous connecter pour publier un commentaire.
Pseudo-éléments faire ce que vous souhaitez. À l'aide de la
:before
pseudo-élément, votre CSS devrait ressembler à ceci:Cela permettra de placer une image avant de la teneur du texte de la
<h3>
, cependant, cela ne changera pas le DOM à tout ce qui est important à noter.Une bonne explication de la façon dont les pseudo-éléments de travail peuvent être trouvées ici, sur Astuces CSS.
OriginalL'auteur Bojangles
Si votre image est 10px large, vous pouvez essayer ceci:
OriginalL'auteur L_Holcombe
Garder votre tag h3 sans balise img, et effectuez les opérations suivantes:
OriginalL'auteur Husain Al Faraj
Échantillon http://jsfiddle.net/KCXVM/
OriginalL'auteur GusDeCooL
Vous pouvez trouver plus d'informations à https://developer.mozilla.org/en-US/docs/Web/CSS/content.
OriginalL'auteur Alyssa Ross
Oui, vous pouvez le faire en CSS.
Simplement utiliser le
:before
pseudo-sélecteur, comme ceci:Ou, bien sûr, utiliser
h3:before { ... }
pour s'appliquer à tous lesh3
éléments.Voici un exemple de travail pour vous
La compatibilité du navigateur: Cela fonctionne dans tous les navigateurs, sauf internet explorer 7 ou une version antérieure.
OriginalL'auteur Spudley
Pourquoi ne pas simplement appliquer l'image comme arrière-plan?
OriginalL'auteur quietmint
Donc, au début, j'ai pensé à une
<span>
chose serait de travailler.Ensuite, j'ai essayé cela, et cela a fonctionné parfaitement:
OriginalL'auteur Dubstaphone
Vous pouvez ajouter une icône devant chaque
h3
rubrique CSS en suivant ces façons ci-dessous (via DIB Blog):- Utilisation Glyphicons de Bootstrap
Si vous êtes en utilisant Bootstrap, alors vous pouvez utiliser Glyphicons d'ajouter des icônes pour le titre de votre choix ou texte.
Bootstrap contient un large ensemble d'icônes, pour ramasser une icône adaptée, vous pouvez prendre un coup d'oeil ici: https://getbootstrap.com/docs/3.3/components/. Une fois le choix d'une icône de votre choix, ajouter à thème est un morceau de gâteau. Vous avez juste besoin d'ajouter la carte après l'emplacement que vous voulez que votre icône à afficher
Remarquez que l'icône, j'ai ajouté est “ok” donc sa catégorie doivent être “glyphicon-ok”. Chaque icône (dans la liste je l'ai mentionné ci-dessus) est compatible avec une autre classe.
- Utilisez des icônes existantes Triche qui est actuellement utilisé de Police ou de tiers
Si votre site web ne pas utiliser Bootstrap ou de l'ensemble d'icônes de Bootstrap ne pas répondre à votre besoin (malgré contenant un lot) (Glyphicons de bootstrap a l'affichage des erreurs sur IE10 de Window Phone OS). Après cela, vous pouvez vérifier quelles polices de caractères du site web que vous utilisez est et savoir si elle a une des icônes de Triche bibliothèque ou pas. Par exemple: Elusiveicons, Fontisto, la Conception de Matériel... sont quelques-uns des polices qui ont des icônes de Triche qui sont pour une utilisation immédiate.
Si votre actuellement utilisé police du site web a des Icônes Triche, alors vous pouvez avoir un ensemble de icônes de la troisième partie. Ici, je voudrais vous présenter “la Police Impressionnant Icônes”. C'est un beau et populaire jeu d'icônes.
Pour utiliser ce jeu de cons, vous devez ajouter ce code à la section head de votre site web:
– Après l'ajout de CSS, vous pouvez utiliser ce code à mettre dans le HTML qui affiche des icônes (vous pouvez appliquer cette méthode à la partie que vous utiliser Triche de la police comme mentionné ci-dessus. Certaines polices ont unique façon d'utiliser)
– Si vous ne voulez pas le code dans le HTML, vous pouvez simplement utiliser les CSS. Avec CSS, vous avez besoin de trouver la Classe ou l'ID de la partie qui affiche l'icône et après que l'utilisation de la ci-dessous le code CSS pour l'afficher. Ici, j'ai l'affichage de l'icône d'ÉDITION de la troisième partie “de la Police Impressionnant Icônes” avant (::) avant le titre, avec 2 propriétés de rembourrage-droit et police de style (vous pouvez également l'afficher après le titre en utilisant après la propriété):
Avis: le code de contenu est le code hexadécimal. Vous pouvez le trouver et de le remplacer par le code de la actuellement utilisé icône. Avec “Police Impressionnant Icônes”, vous pouvez le trouver ici: https://fontawesome.com/cheatsheet
OriginalL'auteur OIW