Back to Community Threads
6
Custom Icons using Font Awesome
Idea shared by Eddi Bento - 1/12/2015 at 10:46 AM
Proposed
We're looking at upgrading from 9.x to 10.x (possibly 11.x when it releases) and I've taken a look around the new portal.
 
My biggest gripe is the custom links.  It took me a bit to figure out, but all the icon images seem to be taken from Font Awesome (or more specifically, a small included subset of the icons found here - http://fortawesome.github.io/Font-Awesome/icons/).
 
I'm sad to see that our custom links suffer a fate where they are text based only and no longer include an image by default without some major CSS customization or hacking.  This somewhat alienates the customer experience that our customers have come to with our wickedly styled icons in version 9.x.
 
TL;DR
I feel that SmarterTools should create an additional form for custom links that allows us to input either the Hex code for a Font Awesome icon or the name (fa-<iconname>) to assign to the custom links.  SmarterTrack should then easily stylize the link for us using the same CSS that the main links use (home, KB, News, Ticket, Community).
 
I also feel that ST should give us to the ability to easily change the icon type and name of the stock links as well (so we can differentiate between another customer's system and be consistent with the user experience on each individual Support page).  My Knowledge Base icon can be fa-book whereas another KB icon can be fa-database (like the good ol' days).
 
I have seen that you can enter this into the Announcements part but it isn't consistent throughout all the pages.

12 Replies

Reply to Thread
0
This can be easily achieved via the custom CSS. In fact I have already implemented this solution in my own custom skin which will be available for sale shortly.
0
Perhaps some of us expect the functionality to remain the same throughout versions without having to purchase third party skins.  Again, this was all fine and dandy in ST v9.x. I don't want a custom skin, just a user-dumb way of managing custom links with images/icons - predefined from Font Awesome or not.
0
Care to provide a CSS example?
0
To add fontawesome icon to a text based menu link all you need to do is identify the individual link class or id and use :before or :after to assign content via CSS. For example: next-link:before { font-family: FontAwesome; content: "\f080"; } As SmarterMail uses FontAwesome by default you don't need to install the font files or modify aspx. If I'm not wrong the SmarterMail 13 uses FontAwesome v.4.0.0 whereas the latest icon set is currently at v.4.2.0 but no reason for concern as it can be manually updated.
0
As far as my checking went, not all of the icons are referenced by default in the stock CSS. Most of them are but not all.
0
Agree the way SmarterMail's compiled is very inconsistent. However there are plenty of workarounds for one to be able to reference all links and icons without using a unique id or class. What tends to take up the most of my time is testing every god damn change :D
4
It really shouldn't be difficult and it's a great feature to have (that was there in 9.x).
 
You create the additional setting in the Management Interface:
 
New Custom Link Settings
 
This would in turn create a new icon using the font.awesome icon you selected inline with the other icons:
 
Buy Coffee Icon Inline
 
This diagram would show the float space of the other icons:
 
 
Green is the space where the default icons live and blue is where the custom links would live and overflow too.  This would allow various portals to look fundamentally different.  Right now, every 10.x and 11.x portal looks like a clone of the other...  There's no personality.
0
Hi Eddi, thanks for this very useful tipp - nevertheless: it seems, that it is no longer possible to define custom icons in ST 11 (?).
 
 
Regards,
Peter
0
Hey Peter. That wasn't a tip. It was a suggestion. That's the point of the post. ST has removed this feature from the v9 days of Smartertools. My pictures above show how I would fix the problem that this post provides.
0
Oh sorry. Thanks for the clarification!
0
Hey, no worries man. It sounds like you want this feature. Make enough noise and perhaps ST will build it so that some of us can upgrade in the world.
0
The problem with the custom icons is that they aren't static throughout the site.  They used to be.  I did find a way to insert static icons and links using CSS and HTML page edits, but as it's static, it affects all brands.  I really wish you guys would implement my suggestions in a future release as this is the way all previous versions of ST worked.
Back to Community Threads

Reply to Thread

Related Knowledge Base Articles

SmarterTrack/WHMCS Addon ModuleUtilities and Conversion Tools
How to Set up SmarterTrack CommunicatorSmarterTrack > Installation and Configuration
Add Custom CSS for BrandSmarterTrack > Brand Configuration and Management
Create Host Headers for Use with BrandsHosted SmarterTrack Helpdesk > General Topics
Create Default Messages to Customers at the Beginning and End of Live ChatsSmarterTrack > Installation and Configuration