Customize Profile menu icons in mobile

[Carly]

How can I change icons for profile menus on mobile?
See attached screenshot that shows 3 star icons for different menus.

[Varun Dubey]

Hi @costyclan
You can use this apprach

#mobile-item-nav ul li#[id of the menu item]:before{
content: '\f0fb';
}

Here is the cheat sheet of icon options with font awesome: http://fortawesome.github.io/Font-Awesome/cheatsheet/ just change the content last 4 characters
Like for following

#mobile-item-nav ul li#user-members-following:before{
content: '\f164';
}

Regards
Varun Dubey

[Carly]

@vapvarun thank you. Where do I put this code? custom.css of child theme?

[Varun Dubey]

Hi @costyclan,
you can add them inside theme option
We have inbuilt option to add custom css.
https://drive.google.com/file/d/0Bzv-k-FcE80iUlhFN0t5X1p3Umc/view?usp=drivesdk
Regards
Varun Dubey

[Carly]

I tried adding this to custom.css but I couldn’t get it work?

[Varun Dubey]

Hi @costyclan

You do not have to paste above as it is, inspect those star icon which you need to change. I have just provided an example how you can do that.
We recommend using the Chrome Inspector in your Google Chrome browser to inspect HTML and see how any element within the theme is being styled.
regards
Varun Dubey

[Carly]

I tried adding this code:
#mobile-item-nav ul li#user-members-following:before{
content: ‘f234’;
}

but screenshot attached shows ‘followers’ icon still as a star

[Stephen]

Hi @costyclan,

I would recommend making these changes in the custom.css in your child-theme. One Social mobile has three responsive sizes (480 pixels and smaller, 481 pixels and larger, and 721 pixels and larger.) This means you should add your custom code in each of the three sections between the appropriate opening and closing brackets as such:

@media screen and (min-width: 481px)  {

	/*
	.just_an_example_of_where_to_put_your_custom_css {
	color: black;
	}
	*/

}/* don't delete this closing bracket */

Lastly, with regards to not seeing immediate changes. I would check to see if you have a cache plugin installed and or if your hosting provider has one. If you do, I would recommend turning those off while in development to see things while you’re working on them. If you don’t want to, or can’t turn it off, (perhaps your host won’t allow it,) then you can try a private session in your browser.

[Carly]

thanks @Stephen for the detailed reply. I’ll give that a go : )

[Anonymous]

@stephen thanks for you input..

[Carly]

i’m still not having any luck changing mobile icons. Anyone able to help further with this?

[Anve S.]

Hi @costyclan ,

Please take care of the “\” that is used while you use unicode value . I think you neglected “\” in your css code

The correct one is :

#mobile-item-nav ul li#[id of the menu item]:before{
content: '\f0fb';
}

Please give it a try.

Regards
Anve

[Stephen]

Hi @anve,

I actually have a follow up here pertaining specifically to the #blogs-personal-li icon and I was hoping you could help with this.

I’ve changed the entire Icon Set for the Sub Navigation: Carousel and everything is perfect aside from the aforementioned (blogs) not adopting the changes.

For anyone who is interested, I also added styling for following, followers (if you’re using User Blogs,) as well as, products, orders (if you’re using Marketplace) since these were missing from the stylesheet and picking up the generic icon which is the star (\f006.) Here is a list of those below:

#mobile-item-nav ul li#members-following-personal-li:before
#mobile-item-nav ul li#member-followers-personal-li:before
#mobile-item-nav ul li#products-personal-li:before
#mobile-item-nav ul li#orders-personal-li:before

Regarding the blogs icon, here is what I’ve got thus far.

– In the stylesheet it appears as:

/* Sites */
#mobile-item-nav ul li#blogs-personal-li:before {
    font-family: 'FontAwesome';
    content: "\f02c";
}

– However, using the Web Inspector it appears as:

/* Sites */
#mobile-item-nav ul li#blog-personal-li:before {
    font-family: 'FontAwesome';
    content: "\f02c";
}

– Notice the difference between blogs/blog.

– I attempted changing blogs to blog in both my custom.css, as well as, the main-mobile.css to see if it might pick up the changes afterwards and it did not. However, I am also wondering if the minified css files are interfering as well.

– Moreover, and perhaps most oddly, in the main-mobile.css, the icon being requested (\F02c) is actually the tags icon and from what I can tell, that loads nowhere across the entire theme – mobile or otherwise. What appears to be loading is the pencil icon (\F040.) The latter I can’t find anywhere in any stylesheet.

Anyway, bit of an oddity but I’d like to find out what’s going on so I can complete my customization of the Sub Navigation: Carousel.

Thanks

[Carly]

thank you @stephen

[Varun Dubey]

thanks @stephen, I will close this thread.

Feel free to create new for any further questions.

Regards
Varun Dubey