Je fais une page "projets" pour mon site Web de mon portfolio, j'ajoute une icône SVG avant le nom de chaque projet. Étant donné que le code de l'icône SVG est très grand, je veux quelque chose qui peut faire quelque chose de similaire à quelles fonctions font dans les langages de programmation mais je ne sais pas comment le faire.
Voici une partie de mon code: P>
p>
<section>
<div class="container">
<div class="row">
<div>
<h5 class="card-title">
<svg role="img" viewBox="0 0 20 20" height="20px" width="20px">
<path fill="#000000" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
</path>
</svg>
</h5>
<!-- More Stuff here -->
</div>
<div>
<h5 class="card-title">
<svg role="img" viewBox="0 0 20 20" height="20px" width="20px">
<path fill="#000000" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z">
</path>
</svg>
</h5>
<!-- More Stuff here -->
</div>
</div>
</div>
</section>3 Réponses :
Je supprimerais complètement p> SVG code> des fichiers de votre HTML (sa traînante sémantique), alors je définirais une classe d'une classe, puis la prépendez automatiquement à H5 ou à cette classe, voir la démo ci-dessous CSS CODE> Le but natif était juste que: définissez-la une fois - réutiliser x fois! Mais les gens ont tendance à l'oublier ces jours à cause de la pléthore de frameworks et de ce que non .. p>
<section>
<div class="container">
<div class="row">
<div>
<h5 class="card-title">
Title 1
</h5>
<!-- More Stuff here -->
</div>
<div>
<h5 class="card-title">
Title 2
</h5>
<!-- More Stuff here -->
</div>
</div>
</div>
</section>
Merci beaucoup! Cela fonctionne comme prévu. Cependant, j'ai utilisé cela sans :: avant et cela fonctionne également bien. En outre, qu'est-ce que contenu: ""; signifie dans ce bloc de code? (Je n'ai pas autant de connaissances de CSS.). Merci encore.
Heureux qui vous a aidé, ce content: "" est nécessaire pour rendant un pseudo bloc, très utile pour les icônes et les petits ajouts en CSS
Vous pouvez utiliser cet extrait. Insérez-le avant la balise corpot> code> dans votre document. Que vous pouvez supprimer le SVG de votre balisage d'origine. <script>
document.addEventListener('DOMContentLoaded', function(){
var titles = document.querySelectorAll('.card-title');
for (i=0;i<titles.length;i++) {
var span = document.createElement('span');
span.innerHTML = '<svg role="img" viewBox="0 0 20 20" height="20px" width="20px"><path fill="#ffffff" d="M4 9H3V8h1v1zm0-3H3v1h1V6zm0-2H3v1h1V4zm0-2H3v1h1V2zm8-1v12c0 .55-.45 1-1 1H6v2l-1.5-1.5L3 16v-2H1c-.55 0-1-.45-1-1V1c0-.55.45-1 1-1h10c.55 0 1 .45 1 1zm-1 10H1v2h2v-1h3v1h5v-2zm0-10H2v9h9V1z"></path></svg>';
titles[i].prepend(span);
}
})
</script>
Vous pouvez utiliser Modèles de lame avec Laravel, également Twig Modèles avec symfony, et vous pouvez également le faire à Django. Si vous avez un cadre MVC, il existe un moyen d'utiliser des vues dans tous les contrôleurs. Comme CodeInter 3 appelant avec dans la lame de Laravel est comme ceci: P> $ ceci-> Voir ('itinéraire ..', $ données); code>. Ensuite, vous pouvez passer à toutes les variables avec le code grand code SVG et l'impression dans le gabarit. {% include "route/viewname.html" with svgcode = "..." %}
Nope, avec HTML / CSS, vous ne pouvez pas faire des éléments réutilisables. Je vous recommande d'examiner la réaction. Vous pouvez obtenir un site Web en utilisant réagir avec pas beaucoup de connaissances de JS pour commencer. Mais vous pouvez réutiliser des éléments en important des icônes au modèle. Vous auriez besoin d'importer une seule fois (
Impôte d'importer à partir de "../ images / icon.svg" ) et dans le modèle, vous devez simplement ajouter