Optical illusion

[BBcan177]

Edit  /usr/local/www/widgets/widgets/system_information.widget.php

@ Line 129    add the part in red    ( icon-success ):

Refresh the dashboard, you will notice the Firmware cog wheel spinning off center ;)

[jwt]

https://redmine.pfsense.org/issues/5620

[Steve_B]

I believe that is because font-awesome icons are not technically icons in the HTML sense, they are characters. The correct class would, therefore, be "text-succcess" and this works as expected, changing the icon color but without making it eccentric.

[heper]

@steve_b

the icon-success/error/warning are custom css we've / i've added.
https://github.com/pfsense/pfsense/blob/master/src/usr/local/www/bootstrap/css/pfSense.css#L475-L497

perhaps changing the pfsense.css file would solve this everywhere as the icon-* classes are used in multiple places

[BBcan177]

Thanks heper,

Also is it ok to use the class "icon pointer" with fa icons? or is there another alternative?

I have changed the code to use "text-success" but I am also noticing that the CSS color is a different shade of green than "icon-success". Could this be fixed?

I had an issue today with a tester who had UBlock enabled in his browser that was blocking one of the font awesome icons from being displayed in the widget. I think it might be best to provide a warning, or atleast some documentation in the help section about this issue…

The icon that was blocked was "fa-arrow-circle-o-up"

http://fortawesome.github.io/Font-Awesome/icons/#brand

[Steve_B]

Yes, you can use icon-pointer wherever you need to. Its purpose is just to change the curor to a pointer so that the user knows it is clickable. That happens automatically with anchor tags of course, but not necessarily when the click is handled by jQuery/Javascript

The CSS file overrides Bootstrap colors so that we can implement different schemes (dark, bright, scary, default etc) @JDillard is working on making all of the colors consistent, so that will get better soon.

The font blocking thing is a pain. I suppose we should a) Avoid branded fonts, b) Modify the class names c) Display a warning somewhere (where?) and/or d) make sure our support team is aware.

Sigh

[BBcan177]

Thanks Steve,

The fa icon that was blocked wasn't even a 'Branded' icon. :)

"fa-arrow-circle-o-up"

With font awesome you can do a stacked icon, maybe a workaround could be to have a smaller icon in the background? or some jQuery magic to warn the user that an fa icon was deleted?

Its just a matter of time before people get hit by this and see missing Icons :)

[jdillard]

uBlock is open source so you can open an issue, but this is the only thing that shows up when I searched:

https://github.com/chrisaljoudi/uBlock/search?utf8=%E2%9C%93&q=fa-arrow-circle-o-up

[BBcan177]

The tester that had UBlock enabled, found that particular 'fa icon' in his 'Fanboy's Annoyance List' and 'Fanboy's+EasyList Merged Ultimate List'.

I don't use UBlock, so I am just letting you guys know about the issue. I believe the tester submitted a False positive report to the maintainer of that list.

The Link page to Font Awesome website also mentions that ADBlockers can cause issues with these icons. Its just a matter of time that others will hit a similar issue in the future. So this was just an FYI.

[jdillard]

Thanks for testing reporting and double thanks for being so thorough!

An enduser (and I speak as one) that uses a tool that breaks the experience (I use uBlock as well) has to take some responsibility. It is hard to design a perfect experience for third party plugins to third party plugins.

[BBcan177]

@jdillard:

Thanks for testing reporting and double thanks for being so thorough!

An enduser (and I speak as one) that uses a tool that breaks the experience (I use uBlock as well) has to take some responsibility. It is hard to design a perfect experience for third party plugins to third party plugins.

I agree… I think it should just be noted in the pfSense Docs somewhere... not that anyone reads the documentation anyways :)

I use uBlock as well

Maybe… just maybe... try pfBlockerNG DNSBL :)

[jdillard]

I'm not sure where to put that, probably best to wait until 2.3 hits the masses and see how much it hits the fan. I agree there should be a comment in the design docs not to use the branded icons though.

@BBcan177:

Maybe… just maybe... try pfBlockerNG DNSBL :)

I'm working on it…I'm still a n00b :)

[jdillard]

I just pushed the changes from icon-* to text-* and added the text-* classes to pfSense.css

p.s. this is the cheatsheet I use for picking colors: https://www.google.com/design/spec/style/color.html#color-color-palette

don't tell anyone ;)

[BBcan177]

@jdillard:

p.s. this is the cheatsheet I use for picking colors: https://www.google.com/design/spec/style/color.html#color-color-palette

don't tell anyone ;)

I saw this post from user: rcfa:
https://forum.pfsense.org/index.php?topic=100213.msg579186#msg579186

Would be nice to have a selection of 'Primary colors' to choose from in the GUI, and then pfSense could use the appropriate css color palette settings according to that google link for the 'title bars, title bar text, regular text, heading, page background, highlight color,' etc….

Great link btw ... I was using this:
http://www.w3schools.com/tags/ref_colorpicker.asp

[jdillard]

I responded to the other comment.

the primary colors are intended to be success, warning, info, etc classes. it is a WIP.