Add icon to link

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;
}

Hi David,

thank you for your quick response. It works perfectly.

Best regards
Jens

Glad to hear that!

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

Thanks for sharing @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

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;
}

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.

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

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

Thanks again. :)

Glad to be of help!