Bonjour,

J'ai ajouté une icône après mes liens externes avec le CSS suivant, par contre plutôt que de lister en CSS tous les liens externes contenant une image, j'aimerai modifier ce code pour qu'il ne mette pas l'icône lorsqu'il détecte une image sur le lien.

icône : <a href="">blabla</a>

pas d'icône : <a href=""><img src=""/></a>

Mon problème est que je ne vois pas comment faire, une idée ?

a[href^="http://"]:after,
a[href^="https://"]:after,
a[href^="ftp://"]:after {
    content: "\f08e";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    padding-left: 3px
}
a[href^="https://monsite.fr"]:after,
a.no_icon:after {
    content: ""!important;
    padding-left: 0
}

je sais que sur wordpress y'a des plugins qui le font donc doit y avoir moyen de le faire pas forcément que en css.

l'idée étant de limiter le nombre de plugins.

wordpress n'aime pas le css a:has(>img)

Array.from ( document.getElementByTagName ( "a" ) ).froEach( (el) => {
    if ( !el.getDocumentByTagName ( "img" ) )
    {
        el.style.background = "url(img)";
    }
});

je ne l'ai pas testé mais ça doit être proche de la solution finale

Bonjour Breat ,

Voici comment je ferais au a première vue.

Je pars du principe que j'ajoute l'icone sur le bon lien, plutôt que les supprimer sur les mauvais liens

https://codepen.io/Zonecss/pen/eXdZLQ

ça serait plus simple d'ajouter la class sur les liens avec images (il y en a beaucoup moins)

ton code est avec ou sans la class ? désolé le javascript et moi on s'aime pas tellement

-
Edité par Breat 5 mars 2019 à 11:12:44

<style>
	.link
	{
		background-image: url(fleche_r.svg);
		background-repeat: no-repeat;
		background-position: left center;
		padding-left:25px;
		padding-top: 5px;
		padding-bottom: 5px;
		min-width:20px;
		min-height:20px;
	}
</style>
<a href="#">a</a>
<a href="#">b</a>
<a href="#">c</a>
<a href="#"><img src=fleche.svg></a>
<a href="#">d</a>
<a href="#">e</a>
<a href="#">f</a>
<a href="#">g</a>
<script>
Array.from ( document.getElementsByTagName ( "a" ) ).forEach( (el) => {
	if ( el.getElementsByTagName ( "img" ).length == 0 )
	{
		el.classList.add( "link" );
	}
});
</script>

et les images si tu veux tester : 

fleche.svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4a90e2" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h7"/></svg>

fleche_r.svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#d0021b" stroke-width="2" stroke-linecap="round" stroke-linejoin="arcs"><circle cx="12" cy="12" r="10"/><path d="M12 8l4 4-4 4M8 12h7"/></svg>

le site pour produire les icon en svg ici

Donc cet exemple fonctionne impeccable

Merci beaucoup mais petites questions.

Là c'est pour tous les liens sauf avec image ? l'idée est pour tous les liens sortants sauf avec image.

Je dois rajouter la class link à tous mes liens sortant manuellement ?

Possible de l'utiliser avec la flèche font-awesome ?

Et enfin, ton code est en plus ou à la place du mien ?

Bonjour Breat,

Pour toi un lien sortant c'est un lien contenant de la href:

 http://, https:// ou  ftp:// ?

Array.from ( document.getElementsByTagName ( "a" ) ).forEach( (el) => {
	if ( el.href.indexOf ( "http" ) == -1 )
	{
		return;
	}

	if ( el.getElementsByTagName ( "img" ).length == 0 )
	{
		el.classList.add( "link" );
	}
});

La classe link est ajouté automatiquement par le code javascript (c'est justement ça l'intérêt),

pour le background tu met ce que tu veux ici c'est une image svg, mais ça peut être n'importe quoi,

mon code fonctionne tout seul, mais si tu veux tu peux le coupler au tient.

PS : le code que tu fournis dans ton premier message fonctionne t'il, ou est-ce simplement un exemple de ce que tu as tenté ?

ok merci.

je vais tester ton code cette après-midi

oui mon code fonctionne mais il ajoute la petite flèche à côté des images et ça fait moche, c'est pourquoi je demande

J'ai essayé ton code en remplaçant ton CSS par le miens mais rien ne s'affiche sur les liens sans images. j'ai pris ton dernier code javascript.

.link {
    content: "\f08e";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    padding-left: 3px;
}

Bonjour Breat,

Je pense que tu as oublié le ::after

.link:after {

Mais moi \f08e donne un caractère étrange.

Mais j'ai bien compris le fonctionnement de  Font Awesome \f08e est un caractère pro donc payant,

je pense que c'est pour cela que je vois cela si j'utilises \f061 c'est ok