Change Star logo on Awesome theme.
-
Hello, I am going to later today change my theme at wwwdotgenerationzappeddotcom.wordpress.com 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.
-mb
The blog I need help with is: (visible only to logged in users)
-
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.
-
Using http://awesomedemo.wordpress.com/ 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:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/To find out what code to use for the phone icon, I went to the page thesacredpath linked before http://genericons.com/#phone and clicked on the “Copy CSS” link.
Try it out!
-
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.
-
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 WordPress.com 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.
-
-
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: http://thaisbeltrame.com/
-
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
.portfoliowith the unique identifier you found.
Here is an example based on the current setup at http://thaisbeltrame.com/
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.
See https://cloudup.com/ccpiQQJyJkd
As you can see, the unique identifier is
menu-item-2217So 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'; } -
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!!! -
I did not find a .portfolio anywhere in the CSS
.portfolio is in the example I posted previously in this forum thread, see https://en.forums.wordpress.com/topic/change-star-logo-on-awesome-theme?replies=9#post-1649438
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.
-
Note: I already updated an exact example for you. It’s the last one in https://en.forums.wordpress.com/topic/change-star-logo-on-awesome-theme?replies=10#post-1687185 and that’s the one you should be trying.
-
-
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! -
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?
-
-
- The topic ‘Change Star logo on Awesome theme.’ is closed to new replies.
WordPress.com Forums 