Need help? Check out our Support site, then

Change Star logo on Awesome theme.

  1. Hello, I am going to later today change my theme at to Awesome. (I previously purchased Full Frame but it will not allow for the customizations that I need).

    Is it possible to change the star on the nav bar links to some other image? A cell phone for example?

    Many thanks for letting me know as soon as you are able.


    The blog I need help with is

  2. The exact code for this is going to change depending on how your site is configured, and the icons can and will change from page to page. You can see this by going to the Awesome demo page and clicking on the gear icon at the top. This means the CSS needed changes. For that reason, I'm going to suggest you go ahead and make the change to Awesome and then we can take a look at the CSS and get the right CSS for you.

    For reference, you can see all the icons included in the genericon set here. They do have a cell phone icon in the set.

  3. Using as an example, the following CSS will change the gear icon in the left menu to a phone icon:

    .main-navigation ul.nav-menu > div > div > li.portfolio > a:before {
    	content: '\f437';

    To find what selector to use for the CSS, I right-clicked the icon and selected "Inspect Element" and then clicked on the ::before element (which is something you can see if you're using Chrome).

    You might also like:

    To find out what code to use for the phone icon, I went to the page thesacredpath linked before and clicked on the "Copy CSS" link.

    Try it out!

  4. Hi there ... is there a way of figuring out from a theme what CSS code is required to add appropriate genericons onto a menu bar? Is there a beginner's guide to this ... I'm currently using Expound but have also tried Suits and may change again as I finetine the look and feel of my site ... any help/advice/pointers gratefully received thanks.

  5. Yes, there's an example.html file in the Genericons code if you download and unzip it, and it has some great basic usage examples included which might be a good starting point for you.

    Note: you only need to download Genericons to see the example file. You don't need to upload them on to use the examples, you only need to make sure you have the right CSS selectors for whatever theme you're using to target the elements you want to add icons to.

  6. Whoops, forgot the link: (click "Download")

  7. Hello,
    I've purchased the same theme, switching it from Oxygen and followed the process step-by-step as indicated here. However, when I change one CSS all of the icons change to the same one! Can you please try to point what seems to be going wrong? Thank you much!

    This is the blog:

  8. Hi @thaisbeltrame, that's expected because they're all stars to start with in your menu right now and the example from above was made to change any star icon in the Awesome theme menu to a phone icon.

    Now, if you wanted to limit the change to one menu item at a time, you can do that by figuring out the unique identifier for each one of your menu items by looking at the HTML in the page source and then replacing


    with the unique identifier you found.

    Here is an example based on the current setup at

    To find the unique identifier for the "News" menu item, I right-clicked on the star and selected the "Inspect Element" option. Then I looked in the Elements panel that showed up at the bottom of the screen and I looked in the HTML to find the "li" element. That element has an "id" and that's the unique identifier for the "News" menu item currently on your site.


    As you can see, the unique identifier is


    So if you replace the ".portfolio" part of the example above with "#menu-item-2217" then the example will start working for the star next to "News" in your site.

    Here's an adjusted example so you can give it a try:

    .main-navigation ul.nav-menu > div > div > li#menu-item-2217 > a:before {
    	content: '\f437';
  9. Designsimply, thank you so much!
    I'm still very new to CSS.
    I have followed the steps as you instructed me, but I must admit I did not find a .portfolio anywhere in the CSS. I've been trying to make the change in the content item after I click ::before
    Every time I insert the #menu-tem-2217 as you have exemplified the whole thing disappears. Can you point me to what I'm doing wrong?
    Thank you!!!

  10. I did not find a .portfolio anywhere in the CSS

    .portfolio is in the example I posted previously in this forum thread, see

    See how it's in the selector for that first example I posted above?

    Every time I insert the #menu-tem-2217 as you have exemplified the whole thing disappears. Can you point me to what I'm doing wrong?

    Sure! If you save the CSS you're trying into your Appearance > Customize > CSS editor and then reply back here to let me know when that has been done, I'll take a look.

  11. Note: I already updated an exact example for you. It's the last one in and that's the one you should be trying.

  12. It's finally worked!
    Thank you so very much @designsimply!
    Have a great day

  13. ok, so now it won't allow me to change the others as soon as I paste a second change into the CSS... I've replaced the star icon by the the flickr icon and that worked. Then as I proceeded to replace another star by the instagram icon by pasting the same code onto the CSS (changing the menu item as you instructed), it won't let me. It reads as an error...
    I really appreciate your help!

  14. You must look at the HTML to find the unique identifier for each one. Did you do that? What's an example that you tried that didn't work?

  15. hello @designsimply, thank you for your attention. I've figured it out :)

  16. Yay!

Topic Closed

This topic has been closed to new replies.

About this Topic