themovation / th-widget-pack

Theme Widget Pack
19 stars 6 forks source link

Add new icon font #149

Closed teaganm closed 7 years ago

teaganm commented 7 years ago

As discussed, we'd like to include some icons to represent a person as we don't have that currently (mainly for the Tour Info Bar) so I have created and tested an icon font from flaticon that's ready to go. Can you add it in the same as the others?

The files are in /th-widget-pack/assets/person/

I've adjusted the classes so they're good to go, but we'll just want to have one extra class that gets output along side the existing ones like we did with the other packs.

How about "th-prsn"

ex: <i class="th-prsn person-plus"></i>

ryanlabelle commented 7 years ago

Added person icons. Tested all showing up in editor and at least 1 in the live preview. Wouldn't hurt to test a little more.

Would love to combine all these css files and font files for speed + performance.

teaganm commented 7 years ago

Alright, the person font has now been combined with the travelpack font. The travelpack font files and CSS have been updated, and the person pack files have been deleted.

Some of the class names are different in the new pack because the icon names did not all transfer over, and the icon order came through differently.

These are the icons that I'd like to share their own class:

We can use "th-prsn" same as before.

All of the icons should also continue to share the existing class "th-trip"

When they display in the Elementor form, currently they show up in alphabetical order (by pack) which I think is helpful, but this new export did not output them in alphabetical order so they will just need to be re-ordered in the icons.php file.

I think the "th-prsn" icons should be included as their own group just below the travelpack.

ryanlabelle commented 7 years ago

I've added in the 6 and tested, they seem to be working well. I did notice that the font folder needed renaming so I did that and it corrected some errors.

Also, some fonts / icons appear to be missing from the css? Check for beach-bag https://cl.ly/2e0L1E2J201f I think it shows up in the historical css but since been removed. Those will have to be added back in. https://cl.ly/0C3h2p3z3021

https://github.com/ryanlabelle/th-widget-pack/commit/a614188cb155d44769657e684ce84849d173680c

teaganm commented 7 years ago

It's all in there, just many have different classes. For instance, "beach-bag" is "beach-tote-bag".

It seems that flaticon will sometimes provide a different a different class for an icon if it is added to a custom pack, versus when the whole pack is downloaded.

Also, when downloaded as a pack, the CSS listed them alphabetically, but the pack was not displayed in that order on the flaticon site so the new list is in a different order, with each icon assigned a different unicode value.

To make the classes match, I would have had to go down the list typing in each icon class, matching it up with a separate list that is in a different order - and some of the classes weren't even ideal anyway - so instead of doing that I just created new classes for them.

I was thinking it would make the most sense to just recreate the list in icons.php from the travelpack CSS.

ryanlabelle commented 7 years ago

Okay, all done. Cheers

teaganm commented 7 years ago

Great thanks, I think it's all looking good

bentalgad commented 6 years ago

If some one looks for a way to add icon fonts to the elementor core options this is a great plugin: https://wordpress.org/plugins/custom-icons-for-elementor/