If you’re running a blog with multiple trusted authors and you want to add a verified icon/badge to their profile, you can do it via some simple CSS code. A verified icon works as a social proof to the users creating a bond of trust between the author and the reader. It works as a psychological factor in deciding if the content is trustworthy to rely on or pass it. The badge itself defines and evaluates the exclusivity of your blog, and most audiences like to read content that is more strongly based.
Follow these steps to add a verified badge to WordPress authors.
1. Grabbing badge from FontAwesome
FontAwesome is a free resource to get access to thousands of icons, both free and paid. The majority of the developers love it for its free icons and use it over other resources like Icons8 or Material Icons. Head over to FontAwesome, and search for “Check”, in order to find this specific verified icon which is free. If you wish you can purchase the Pro version to get access to well looking badges.
2. Adding the icon in CSS
Visit your WordPress dashboard, navigate to Appearance > Customize. In another tab, open any blog post and right click on the author name. Then click on “Inspect” in order to find the “CSS Class” used in that specific element. For majority of themes, the author’s class is set to be “author-name”. From the Customizer, look for “Additional CSS” at the bottom portion of the menu to add a custom CSS specifically for that badge. Simply paste the code into the “Additional CSS” section and click on “Publish” to save the changes you made.
.author-name:after {
content:'\f058';
font-family:FontAwesome;
font-size:20px;
margin-left:5px;
color:#00000;
}To add a verified badge only to selected users, use the following syntax.
.author-name[user_id="123"]:after {
content:'\f058';
font-family:FontAwesome;
font-size:20px;
margin-left:5px;
color:#000000;
}
