[Resolved] Add icon to link

[Jens]

Hello,

Is it possible to put an icon in front of all links in the content and widget area without installing an additional plugin?
Maybe there is a setting in your plugin that would be very helpful.

Best regards
Jens

[David]

Hi there,

it can be done with some CSS.

For example:

.entry-content p a:after,
.site-footer a:after {
    content: '\1F517';
    margin-left: 5px;
}

simply swap the \1F517 for the HTML unicode you require.

This example adds the link symbol after the link.
If you want it before the link you can use this:

.entry-content p a:before,
.site-footer a:before {
    content: '\1F517';
    margin-left: 5px;
}

[Jens]

Hi David,

thank you for your quick response. It works perfectly.

Best regards
Jens

[David]

Glad to hear that!

[Usman]

FOR ANYONE WHO CAME HERE WHILE SEARCHING SOLUTION LIKE ME!

I modified the above code for the links that open in a new tab (target=”_blank”)

.entry-content p a[target='_blank']:after {
    content: ' \f08e';
    font-family: 'FontAwesome';
     padding-right: 2px;
     font-size: 15px;
}

You can customize it as you wish. Enjoy.

Thanks, @David

[David]

Thanks for sharing @Usman !

[Usman]

Hey @David, there is an update regarding the above code. It is working great as per my expectations, however, I am seeing the icon is not displaying correctly on some devices including my phone!

Screenshot: https://drive.google.com/file/d/1lD4O9a7UKQeRqaemWMg9aeClAKoRnEfk/view?usp=sharing

I want to use the same traditional icon, an arrow in towards the corner.

Will be thankful.
Usman

[David]

Hi there,

try this instead:

.entry-content p a[target='_blank']:after {
    content: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg transform='matrix(0.375,0,0,0.375,-1.5,-1.5)'%3E%3Cpath d='M36,24C34.8,24 34,24.8 34,26L34,38C34,39.2 33.2,40 32,40L10,40C8.8,40 8,39.2 8,38L8,16C8,14.8 8.8,14 10,14L22,14C23.2,14 24,13.2 24,12C24,10.8 23.2,10 22,10L10,10C6.6,10 4,12.6 4,16L4,38C4,41.4 6.6,44 10,44L32,44C35.4,44 38,41.4 38,38L38,26C38,24.8 37.2,24 36,24Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3Cg transform='matrix(0.375,0,0,0.375,-1.5,-1.5)'%3E%3Cpath d='M43.8,5.2C43.6,4.8 43.2,4.4 42.8,4.2C42.6,4 42.2,4 42,4L30,4C28.8,4 28,4.8 28,6C28,7.2 28.8,8 30,8L37.2,8L18.6,26.6C17.8,27.4 17.8,28.6 18.6,29.4C19,29.8 19.4,30 20,30C20.6,30 21,29.8 21.4,29.4L40,10.8L40,18C40,19.2 40.8,20 42,20C43.2,20 44,19.2 44,18L44,6C44,5.8 44,5.4 43.8,5.2Z' style='fill-rule:nonzero;'/%3E%3C/g%3E%3C/svg%3E ");
    margin: 0 2px;
}

[Usman]

Thank you @David for replying with a specific solution. Yes, it is working.

It seems like it will not change color. The previous one changes the color with hover.

[David]

Unfortunately thats not something you can change using this method. And that method is the only CSS method of adding that specific icon.

[Usman]

Yeah, I can understand that. I will keep this one.

Thanks again. 🙂

[David]

Glad to be of help!

[Author]

Posts