Icon Customization

This is a forum to suggest new features for mojoPortal. 

This thread is closed to new posts. You must sign in to post in the forums.
3/5/2013 5:05:36 PM
Gravatar
Total Posts 199
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Icon Customization

Hey Joe,

I was wondering how feasible it would be for you to add support for icon-fonts within mojoPortal. Currently we use images for a ton of little icons, like the edit links, content workflow, page layout buttons, the file manager, etc. I'd love to be able to natively use something like Font Awesome with this.

All it would require is to change a lot of images to buttons, and then allow customization of the characters inside it. Then we could set them to use the icon-font we want with CSS.

I've found a way to make most of these icons show as I like using CSS, by using :before and :after - but this doesn't work in IE7, and it adds more css/markup than is necessary which kind of defeats the purpose of an icon-font (though the font may still look nicer and is certainly easier to customize).

Thanks!
-Isaac

3/15/2013 11:28:19 AM
Gravatar
Total Posts 18439

Re: Icon Customization

Hi Isaac,

I'm certainly open to the idea but to get there we'll need to break it down to a specific detailed list of where they would be used and what changes would be required in each case to make it possible.

FontAwesome looks awesome but I'm a little leary of the license and not yet sure if it is compatible in a way that we could include it directly though I think people should still be able to use it in their skins even if we do not distribute it with mojoPortal.

Best,

Joe

3/15/2013 11:41:20 AM
Gravatar
Total Posts 18439

Re: Icon Customization

Looking at the FontAwesome examples though it seems to me that they are using html elements like <i> incorrectly. In HTML 4 <i> was for italic text, in HTML 5 <i> is for "a span of text in an altered mood" but they are using it without any text inside the <i> and just for elements to hang css and images on. It feels very wrong to me to do it that way even though it looks good.

3/15/2013 12:58:11 PM
Gravatar
Total Posts 199
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Icon Customization

Hey Joe,

I'm not sure about the license either, maybe it would be worth a shot to send them an e-mail and ask?

As far as the <i> element, we could easily implement FontAwesome without doing it that way. It would be easy to make it work with <span>, which has no semantic value, or we could just attach the necessary code to a specific class like "fa-icon" or something, and then we could add that class to any element as needed.

I've also already created a .less mixin that adds them using :before and :after, which is really nice because it means less markup, the only downside being that IE7 doesn't support :before or :after.

I will work on getting you a detailed list of places in mojoPortal that it would be ideal to use it, and what needs to change. I think most of the time it will just be a matter of changing from an <img> to a <span> with a specific class and a specific HTML entity inside.

Thanks,
-Isaac

3/15/2013 1:11:34 PM
Gravatar
Total Posts 18439

Re: Icon Customization

Sounds good Isaac,

The only likely problem will be that in the cases where it is using an img it is part of <asp:ImageButton which is needed for postback. I don't want to change those to <asp:LinkButton because those don't work if javascript is disabled whereas Button or ImageButton will still submit the postback even if js is disabled. So we will need to find a solution for using it in those cases. examples are the submit for approval and approve buttons used in workflow use <asp:ImageButton as I recall.  Maybe the actual img could use a 1 pixel image or transparent png and then a font icon can be overlaid on it somehow. We need to keep accessibility in mind to though and try not to make things unclear for screen readers.

Thanks,

Joe

3/15/2013 1:14:28 PM
Gravatar
Total Posts 18439

Re: Icon Customization

I've read the license and think it may be ok. Just that is embodies the philosophy of the FSF (Free Software Foundation) and want to make sure there is nothing viral about the license like there is with GPL which we can't use. From my laymans read of it it doesn't sound like it would be viral for surrounding software but only for derivative fonts.

You must sign in to post in the forums. This thread is closed to new posts.