YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar engaged asked

How to add custom icons in Yootheme Pro?

Is it possible to add custom icons to Yootheme Pro? There's information in the UIKIt documentation regarding compiling from Github including custom icons..but this seems rather tedious in the long run in regards to theme updates for Yootheme Pro.

  • Feature Request
  • General Question
  • YOOtheme Pro

6 Answers

1

Avatar philipp Yootheme answered

Ah alright, I see what you mean, so currently there is not way to achieve this, I will add this to the discussion list, to see if this would be possible, I think this would also need some rebuild within UIkit3 to make this more flexible.

Kind Regards
Philipp

0

Avatar philipp Yootheme answered

Hi,
if you want more icons to be available you could use a plugin to add font awesome to your wordpress or joomla installation or even just load it on your own without a third party plugin. Then you could use the font-awesome classes to use the icons.
Another option would be to include your icons with the https://getuikit.com/docs/utility#inline-svg option. Here you would need to save your SVG on your server and then just set it as a source for this.

Kind Regards
Philipp

0

Avatar engaged answered

@philipp: Yeah..this wasn't quite what I was after. It was more to be able to use custom icons alongside the UIkit icons for everywhere Yootheme pro let you select an icon... This would be much better than having this icon pack and then telling our clients various other ways they have to do random workarounds to be able to add other icons to for examples lists etc.

0

Avatar douglas.mccarroll answered

Hi Philipp,

Could you go into a bit more detail about what one would have to do to implement your "load your own" suggestion? It would be really helpful to have an explanation that is targeted at newbies. I have some knowledge of HTML, CSS, and Joomla, but am far from steeped in them.

I've tried your "use a plugin" suggestion. I added the Natural Selection Font Awesome extension and it worked great - until I noticed that it had changed my main menu from a horizontal list to a vertical list - which looked very sad. I've uninstalled it.

(Update: The problem with Natural Selection can be fixed, if you're not using the Font Awesome icons in menu items, by going into the settings for the component, going to the Advanced tab, and deselecting "Enable menu icons". They hope to have a better fix for this bug some time soon, i.e. on that allows this option to remain enabled.)

I've also voted for engaged's original question in this thread. Having Font Awesome fonts included in YOOtheme Pro would be great.

Douglas

Edited

0

Avatar douglas.mccarroll answered

Hi All,

Here's a workaround that I've found. I don't think that it will satisfy engaged's requirements but it may be helpful to others who chance upon this thread:

  1. I used the IcoMoon App to extract the SVG for the icons that I wanted. This is pretty simple: search, select, download. SVG files are (surprise!) in the SVG folder of the download.

  2. I created a text element in Builder and pasted the SVG for one of the icons into its Content field.

  3. I added a fill attribute to the <path> element of the SVG (e.g. "<path fill="#3237a4" d=...") to specify the color of the icon.

  4. I set the height element of the <svg> element so that my icon heights would be consistent, as I assume that various Font Awesome icons have various heights (e.g. "<svg ... height="100" ...").

  5. In the Settings area of the text element I set Text Alignment to Center (which is what I want).

It looks pretty good! :)

Douglas

Edited

Know someone who can answer? Share a link to this question via email or twitter.