Add icon to external links

[kamalhasaParticipant]

Hello,

I wanted to know if there is a way to add an icon to external links (like in Wikipedia) on my posts without using a plugin.

regards
Kamal

[Victor FontModerator]

You would use the link's before pseudo element. https://css-tricks.com/almanac/properties/c/content/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[kamalhasaParticipant]

Thank you very much for your reply.

I am not technically sound and I tried searching about the before pseudo element. It was all tough for me to understand it.

I would have happily used the plugin which can do the job. But it conflicted with AMP plugin. As a matter of fact the official amp plugin has conflicts with genesis plugins as well. I have removed many plugins due to this reason.

I even skipped using a plugin which opens all external links in new tab and instead I edited them manually (still doing it).

regards
Kamal

[andytcParticipant]

If you can use FontAwesome (older version) you could try this code to add an icon to all external links - Edit and adjust as required -

/* Change "my-domain-name.com" to your domain name without the www */
/* Change the content icon \f08e to an icon of your choice - Fontawesome older version */

.entry-content [href^="https"]:not([href*="my-domain-name.com"]):before {
 content: "\f08e";
 font-family: FontAwesome;
 font-size: 16px;
 font-style: normal;
 font-weight: normal;
 padding-right: 8px;
 padding-left: 4px;
}

https://fontawesome.com/v4.7.0/

---

Platinum Webdesign

[Author]

Posts