Skip to main content ↑ ↓
Topic: 1.1 Icon conversion (Read 3319 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

1.1 Icon conversion

As described with 1.1 B1 , the core themes began to convert over to using SVG images to replace the various icons around the interface.  You all should remember the drama, it was Festivus with a full airing of the grievances :P

In 1.0 we have a mixed bag, some icons are from Font Awesome, others are .png files from the images directory.

So 1.1 we are moving as many of them to SVG images, currently using Font Awesome but as SVG images and not as an icon font as in 1.0.  The SVG's are defined/held in the CSS, while the sources simply call out the class name for the icon.  You can change the icon to another of your choice by editing the CSS.   They are done as pseduo ::before elements so you can change the content to most anything you want, including urls content: url(image.png) so don't freak out, you can easily update the css and have png images for your themes.

There are several advantages to SVG usage vs icon fonts.  SVG renders icons as images (since it is an image) instead of text, looking nicely at any various resolutions.  As posted previously this is a good read https://github.com/blog/2112-delivering-octicons-with-svg on some of the whys.

OK you all knew that, so why this post? Well I was looking at changing over a few more of the icons to SVG, I'm having a weak moment and needed to be punished  :D  While looking at things, I'm not really keen on some of Font Awesome icons, some, to me, are to rounded, soft, pillowy ...

So looking around for other SVG icon collections I can across IcoMoon which has a good set of icons for our needs.  I started to convert over to them and wanted to get feedback on how it looks compared to what we have now.  It has new a home, upshrink, chevron, board, etc etc icons.

I know this has the potential to become a free for all of "what about this font" set lol
Last Edit: September 18, 2016, 05:01:19 pm by Spuds

Re: 1.1 Icon conversion

Reply #1 –

Humm ... the expand to full size tis broken, Pftttt

And it works fine on my local, double Pftttt
Last Edit: September 18, 2016, 04:56:44 pm by Spuds

Re: 1.1 Icon conversion

Reply #2 –

Guess what? I was trying some stuff with the expand. O:-)

Now I restored the original.
Bugs creator.
Features destroyer.
Template killer.

Re: 1.1 Icon conversion

Reply #3 –

dooo eeeet :D
LiveGallery - Simple gallery addon for ElkArte

Re: 1.1 Icon conversion

Reply #4 –

I prefer these over the flat font awesome blandness. 

Re: 1.1 Icon conversion

Reply #5 –

it looks great! :)
192.MY.ID: Forum ISP Indonesia.

Re: 1.1 Icon conversion

Reply #6 –

The green is terrible. Will lead to Augenkrebs as we call it.  :o  ;)

If a icon is different in detail is totally wurschtegal, as we call it. Use IcoMoon if you need to, or stay with FontAwesome. I don't think most of the admins using ElkArte will see any difference.

Re: 1.1 Icon conversion

Reply #7 –

If you want to make things beautiful, change the default theme please. Nothing works when it is around.

Re: 1.1 Icon conversion

Reply #8 –

Quote from: meetdilip – If you want to make things beautiful, change the default theme please. Nothing works when it is around.
FWIW, here everything I use works as expected, if you are experiencing problems there is a board dedicated to that, no need to hijack topics opened for other things.
Bugs creator.
Features destroyer.
Template killer.

Re: 1.1 Icon conversion

Reply #9 –

PR sent in with the updates .... There should be something in this for everyone to grumble about ... Unfortunately the "airing of the grievances" for this years Festivus is over, we are now onto the "feats of strength"  

Latest light screen shot index.png , Index2.png board icons now have a color gradient as in 1.0 and de-greened some of the icons.

Re: 1.1 Icon conversion

Reply #10 –

If you want it I did post an SVG version of the current board icons complete with gradients.  It's around here somewhere.

Re: 1.1 Icon conversion

Reply #11 –

Thanks, found it and will attempt to CSS content it for inclusion