We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Change menu icons | Forum

Topic location: Forum home » Development » Themes
Jason
Jason Jul 21 '16
Is there a way to change menu icons. I don't see a setting for this anywhere on the admin dash.


Thanks

ross Team
ross Jul 21 '16
You will need to change it by applying new paths to your own icons in base.css fiel or theme customizer in the admin panel


Or just by changing current icons with yours, in the "images" folder of the theme, but they should be in the same format and same size to avoid issues with look of your theme. 

Ryan P
Ryan P Jul 21 '16
Jason,
I was able to do this with the help of Darryl. You'll have to go to admin panel/theme .css & make the changes. Here is the instructions I received from Darryl:

"You can easily add your own FontAwesome icon for them if you want. Here's an example of one of the menu items.

.base_page_bine94m1 a::before {
    content: "\f1ea" !important;
}

You just copy the li class, put a dot in front of it, and add the a::before at the end. Go to the FontAwesome website, look at the icons, click on one you like. You will see a unicode underneath the picture that show the icon in different sizes. That's the code you want. They are all four characters, and need to be like the one above. The one I have above will show an icon of a newspaper."
Jason
Jason Jul 21 '16
Thank You. If I use this how do I control what I am changing? I am trying to change the main menu icons for Resources and Q&A. Also on the sidebar I would like to change the GIF icon.. I appreciate the help


Attachments:
  Screen-02.jpg (259Kb)
Ryan P
Ryan P Jul 21 '16
-Go to the "Resources" tab & right click and select "inspect element".
-Hover over the results until "Resources" is highlighted.
-There you will find the li classes i.e "blogs_main_menu_item" or "base_page_#l#L

Find the li class for Resources and insert the code above in your css, replacing that li class with the path to your Resources tab & the icon code ID.

Hope that helps


Jason
Jason Jul 21 '16

.base_page_j3l18u93 a::before {

    content: "/fa fa-bookmark-o" !important;

}


I must be missing something. Also Font Awesome said I had to add html to the head.


<script src="https://use.fontawesome.com/1b218154a4.js"></script>


Is there a way to add this with CSS?

Darryl B Leader
Darryl B Jul 21 '16
The method is dependent on how the theme has implemented any icons. The method I used involved a FontAwesome implementation into a theme. Some use the Oxwall default icons, and some themes use other custom font icons. I used the FontAwesome CDN in a customized theme. I can look more later today when I get home.
Darryl B Leader
Darryl B Jul 21 '16
From checking the link to your site it looks like you are using a theme from OW Visuals. I have one of their themes "Venus". They use font icons, but not FontAwesome. If it is the same icon sets, and most likely is, I have posted info in the Venus theme forum on how to change the menu icons there. The sidebar icons are a different animal. They pull their icon from code in the plugin. You can't do much about them without changing the icon call in the plugin code. That's why most just use the icon that they are calling for. Those icons are used in other areas of the site as well.
Basically what they have done, and what I did with FontAwesome is we replaced all of the default icons with references to the icon fonts. Same general icons so they will still be consistent across the site. The menu icons can be changed to whichever you like since there is call from a plugin for the main menu items. There is a plugin call for the console where the user, mailbox, and notification icons are.
Darryl B Leader
Darryl B Jul 21 '16
I did see from the demo page that they are still using the simple line icon font set. They already have the font styled, so the method I covered in the venus forum should work here also. The is also a unicode list there for the icon set. You can choose from icons in the set. I would do all of it in the admin panel. If you did it via the theme's base css, everything you did would be overwritten when they updated the theme.
Darryl B Leader
Darryl B Jul 21 '16
If you just like FontAwesome better. Here is the CDN that I used. I placed it in the head section of the html_document.html file under the themes master pages. It should also work by putting it into the head section of your page settings in the admin panel as well.

<link href="https://maxcdn.bootstrapcdn.com/...font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

You would have to change the font-family for the menu items from "simple line icons" to "FontAwesome", and change all of the unicdes to the FontAwesome unicode.
The Forum post is edited by Darryl B Jul 21 '16
Jason
Jason Jul 21 '16
I'm looking to add a Q&A icon above the Q&A and maybe a bookmark above resources. If they have something like that or similar already with the theme, I'm ok to use that.

I'm not really sure what the unicodes are so I think going fontawesome is a stretch for me.

Thanks for all the info.

ross Team
ross Jul 21 '16
Topic was moved from General Questions.
Darryl B Leader
Darryl B Jul 22 '16
Yes. Those are in the list. Go to the Venus theme forum, and look for my post on how to change the icons.


https://developers.oxwall.com/forum/topic/42308

The Forum post is edited by Darryl B Jul 22 '16
Jason
Jason Jul 22 '16
Great!! Thanks so much?
Darryl B Leader
Darryl B Jul 22 '16
You're welcome. Let us know if the info helps. There may be other wanting to do the same.
Jason
Jason Jul 22 '16
It worked!
Darryl B Leader
Darryl B Jul 22 '16
Cool. I think OW Visuals has used the Simple Line Icon set in most of their themes. I'm glad it worked for you.
Deutech
Deutech Aug 10 '23
Discover clean and refreshed skin with Deutech's best face wash in Pakistan. We provide a range of face wash for various skin types. Unlock a new level of clean and glowing skin with our face wash. So, order the best face wash online today.
The Entertainer
The Entertainer Aug 11 '23
The Entertainer provide bady dolls for girls online in Pakistan. The Entertainer bring an amazing collection of baby stroller , dolls and other stuffed toys for their costumer.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ... » »»