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

  1. 12

    Pseudo-éléments faire ce que vous souhaitez. À l'aide de la :before pseudo-élément, votre CSS devrait ressembler à ceci:

    h3.widget-title:before {
    content: url('/path/to/image');
}

    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

  2. 5

    Si votre image est 10px large, vous pouvez essayer ceci:

    .widget-title {
background: url(smallicon.png) left top no-repeat;
padding-left: 10px;
}

    OriginalL'auteur L_Holcombe

  3. 2

    Garder votre tag h3 sans balise img, et effectuez les opérations suivantes:

    h3.widget-title {
position: relative;
padding-left: <width of the icon image>;
}

h3.widget-title:before {
content: '';
width: <width value>;
height: <height value>;
position: absolute;
left: 0;
display: block;
background: url(<path of the icon image>) no-repeat;
}

    OriginalL'auteur Husain Al Faraj

  4. 1
    h3:before {
content: url('https://www.google.com/images/srpr/logo4w.png')
}

    Échantillon http://jsfiddle.net/KCXVM/

    OriginalL'auteur GusDeCooL

  5. 0
    .widget-title:before {
  content: url(path/to/image.png);
}

    Vous pouvez trouver plus d'informations à https://developer.mozilla.org/en-US/docs/Web/CSS/content.

    OriginalL'auteur Alyssa Ross

  6. 0

    Oui, vous pouvez le faire en CSS.

    Simplement utiliser le :before pseudo-sélecteur, comme ceci:

    widget-title:before {
    content:url('imagename.png');
}

    Ou, bien sûr, utiliser h3:before { ... } pour s'appliquer à tous les h3 é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

  7. 0

    Pourquoi ne pas simplement appliquer l'image comme arrière-plan?

    .widget-title {
    background: url(...) no-repeat 50% 0;
    padding-left: 20px;
}

    OriginalL'auteur quietmint

  8. 0

    Donc, au début, j'ai pensé à une <span> chose serait de travailler.

    Ensuite, j'ai essayé cela, et cela a fonctionné parfaitement:

    h3:before{
content: url('your url');
}

    OriginalL'auteur Dubstaphone

  9. 0

    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

    <span class="glyphicon glyphicon-ok"></span>

    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:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

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

    <i class="fa fa-edit"></i>

    – 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é):

    span.last-updated-time::before {
font-family: "FontAwesome";
content: "\f044";
padding-right: 5px;
font-style: normal;
}

    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