Adding an external link icon on your WordPress site is a great way to make it easy for your visitors to identify links that will take them outside of your website. It can also make your site appear more professional and well-designed. In this article, we will go through a step-by-step guide on how to add an external link icon on your WordPress site.
Install and activate the “Better Font Awesome” plugin
The first step is to install and activate the “Better Font Awesome” plugin. This plugin allows you to use Font Awesome icons on your site. To install the plugin, go to your WordPress dashboard, click on “Plugins” and then click on “Add New” Search for “Better Font Awesome” and click “Install Now” Once the plugin is installed, click “Activate“
Add the external link icon to your CSS
Once you have installed and activated the “Better Font Awesome” plugin, you can add the external link icon to your CSS. To do this, go to “Appearance” in your WordPress dashboard and click on “Customize” Click on “Additional CSS” and add the following code:
a[href^="http://"]:not([href*="your-site.com"])::after {
content: "\f08e";
font-family: "Font Awesome 5 Free";
margin-left: 5px;
}This code will add the external link icon to all links that start with “http://” and are not on your own domain. You can adjust the margin-left value to change the distance between the icon and the link text.
Save and preview your changes
Once you have added the CSS code, click “Publish” to save your changes. You can then preview your site to see the external link icon in action.
Conclusion
Adding an external link icon to your WordPress site is easy and can make your site more user-friendly. By following the steps outlined above, you can add an external link icon to your site and improve the user experience for your visitors. If you are looking for add icon fonts in your WordPress theme, click here.
Add An External Link Icon On WordPress Site FAQ
Here are the most common questions about add an external link icon on WordPress site.
No, you do not need any coding knowledge to add an external link icon to your WordPress site. You can follow the step-by-step guide outlined above.
Adding an external link icon can make it easier for your visitors to identify links that will take them outside of your website. It can also make your site appear more professional and well-designed.
Yes, you can customize the external link icon by changing the CSS code. You can also use a different font icon library if you prefer.
No, adding an external link icon should not slow down your site as long as you use a lightweight icon library and optimize your CSS.
Yes, you can add an external link icon to specific links only by adding a class to those links and then targeting that class in your CSS code. Simply add a class name to the link like this: Link text. Then, in your CSS code, replace the “a[href^=”http://”]” selector with “.external-link“.
