Topic: Full icon list | Themeco Community

Author

Posts
October 8, 2015 at 5:48 pm #617373

MexConcept
Participant

Hi team,

we’re trying to find the full icon list (apparently there are 350 included in X) however the closest we can find is this: http://theme.co/x/demo/integrity/1/shortcodes/icon-list/

Basically we need to replace the topbar social icons with others, and need to customize the colors.

#1 where can we find the full X icon list (with it’s implementation code)
#2 how can we change the standard color of the icon
#3 how can we change the hover over color of the icon

Thanks!

October 8, 2015 at 5:49 pm #617374

MexConcept
Participant

This reply has been marked as private.

October 8, 2015 at 10:38 pm #617594
Lely
Moderator
Hello There,

Thanks for posting in and for the access above.
To achieve that, please add the following at the end of your Topbar content:
```
<div class="custom-social">
 
 
 
</div>
```
You may refer to this list of icons that you want to use:http://theme.co/x/demo/integrity/1/shortcodes/icons/
Please also add the following custom CSS via Appearance > Customize > Custom > CSS
```
.custom-social {
 display: block;
 clear: both;
 text-align: right;
 font-size: 41px; /*Adjust to your preferred icon size*/
 color: red; /*Change to your preferred icon color*/
}
.custom-social .x-icon:hover {
 color: blue; /*Change to your preferred icon hover color*/

}
.x-topbar .x-social-global {
 display: none; /*hides current social icons*/
}
```
Hope this helps.
October 9, 2015 at 7:13 pm #618936

MexConcept
Participant

Hi, thanks for the info 🙂

When trying to implement, this, there’s something missing (I believe it’s unicode values):

When we take your code:  and change x-icon-book to x-icon-lock (as per http://theme.co/x/demo/integrity/1/shortcodes/icons/) :
 the “book” is still there, instead of the “lock” see here for reference:

In the Customizer, this little icon appears:

Or what would we need to change to make these changes? it’s this little icon “” we don’t know how to reproduce/change.

Thanks!

October 9, 2015 at 10:49 pm #619072

Rad
Moderator

Hi there,

Thanks for writing in.

The icon type is not really decided by the class name you changed. But the data that is inside the data-x-icon=""

Please change that to this,

data-x-icon=""

You may check some other icon codes here http://fortawesome.github.io/Font-Awesome/cheatsheet/

Cheers!

October 12, 2015 at 11:19 am #621788

MexConcept
Participant

Thanks, this is what we needed!

Just as suggestion: the cheat-sheet/unicode could be included with the icons (http://theme.co/x/demo/integrity/1/shortcodes/icons/) so one could figure out the code without contacting support=less time consumption for support&client 🙂

best regards

October 12, 2015 at 11:36 am #621810

Thai
Moderator

You’re most welcome 🙂

Thank you for your suggestions.
Author

Posts