Discover how to display icons next to the items to access and exit the menu added by the Osom Modal Login plugin.
The Osom Modal Login plugin adds an item to the menu to access or exit conditionally, depending on whether the user is logged in or not.
You can customize the text in the plugin settings. But you may want to add an icon next to the text. For example:
Luckily you can achieve this with a little CSS.
Let’s see how:
Steps to display icons next to Osom Modal Login menu items
1. Choose SVG icons
If you do not have a SVG icons library, there are several free to use, such as:
Once you have chosen the ones you need, use this online tool to convert the SVG to a format that allows you to use it in CSS, in this case, as background-image.
Once you have the two icons, move on to the next step.
2. Give styles using CSS
The Osom Modal Login plugin uses two different classes depending on whether it displays the login or logout element:
osmloginlogout
So you can use them to display one icon or another with the ::before pseudo-element.
To do so, insert this code at the end of the style.css file:
To see this and another 1097 code snippets of this website, login or subscribe here.
But this is just an example.
You can use any icon to be displayed next to the menu item.
Conclusions
You can see how easy it is to display some SVG icons next to the login or logout elements of the Osom Modal Login plugin.
Any questions? I read you in the comments.
And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉
