![\"\"](\"https:\/\/farofaro.com\/wp-content\/uploads\/2022\/02\/image-700x93.png\")
<\/p>\nIt is sometimes useful to replace the text link in a menu with an icon. For example to replace the text “Home” with a house icon.<\/p>\n
We design the company’s website Wizaeroa specialist in maintenance and SEO. Recently we had to add a login icon located on the right in the main menu, visible on the following image:<\/p>\n
<\/p>\n
A very simple solution is to call the image in HTML from your Worpress menu management.<\/p>\n
To do this:<\/p>\n
just place your icon in an image folder on your site. To do this properly we have created an “image” folder in the theme folder. Then we imported our image ” icone.svg ” in it.
\nthen simply call up the HTML image directly in the “Navigation title” field of the menu management.
\nHere is the code to enter:<\/p>\n
<img src=\"https:\/votresite.com\/wp-content\/themes\/montheme\/image\/icone.svg\"><\/code><\/pre>\nOf course, “mywebsite.com”, “mytheme” and “icone.svg” have to be replaced by your own site url, theme name and file name of your icon.<\/p>\n
This is what it looks like from the WordPress menu management:<\/p>\n
![\"\"](\"https:\/\/farofaro.com\/wp-content\/uploads\/2022\/02\/image-3.png\")
<\/p>\n
Once saved, your icon will appear in the menu.<\/p>\n
Then you will have to adjust the appearance with a few lines of CSS. This is what we added in the “style.ccs” file of the theme:<\/p>\n
#site-header .primary-menu-wrapper #menu-item-211{ width: 50px; height: auto; border-left: 2px solid #426def1a; padding: 0px 0 0 20px; display: block; top: -2px; }<\/p>\n
And here’s the result:<\/p>\n
![\"\"](\"https:\/\/farofaro.com\/wp-content\/uploads\/2022\/02\/image-2-700x454.png\")
<\/p>\n