Custom Icon Fonts as an Efficient Icon Solution

Image Files Inhibit Flexibility Down the Road

We recently had a request to create a set of icons to represent various school subjects and activities for a local school district. Instead of trying to fit one of the many icon font families out there (such as Font Awesome or Glyphicons) to our project, we wanted to take a more custom route and create all of these icons as vector illustrations. The advantage to using vectors is that they are not only easy to implement for both clients and developers, but they allow for infinite scalability and easy CSS manipulations. Fortunately, a few tools have cropped up to help us take all of these vector images and automatically convert them to an icon font family of our own. This article will show you how to do that, as well as work with integrate these icons with existing content managers such as Drupal.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Fonts aren’t just for text anymore

Fontastic is a website that takes your uploaded SVG image files, converts and combines them all into a single font family, and then lets you download the custom font with some example CSS to get you started. Oh yeah, and it’s free!

The process for creating the icon font is pretty simple. Make sure your vector images are compound paths and free of any unnecessary anchor points. The idea is for these image files to be as “light” as possible, so it’s really important to upload nice, clean vectors. Once you’ve uploaded your SVG icons under ‘Add More Icons’ on Fontastic, you can select the icons you would like to convert to a font, customize the icon’s class name and character mapping, then publish. The publish function downloads a folder with all of the necessary files to integrate the custom font to your project with complete cross-browser compatibility.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Putting the Icon Font System to Work

The best way to get these icons displaying in your project is to start by including the ‘styles’ stylesheet from the newly downloaded Fontastic files. It includes a font-face rule that is optimized for browsers all the way down to  the most frustrating versions of Internet Explorer. Include this stylesheet in your project and you’re ready to go.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Perhaps the most familiar way to implement this custom font is by adding classes to <i> tags, much like how Font Awesome works. In our Fontastic example, we can pull up the ‘icons-reference.html’ file in our browser and see all of our icons paired with their associated CSS class name. By default, Fontastic requires an ‘icon’ class on the icon tag and then the custom class names are prefixed with ‘icon-’ like so:

<i class=”icon icon-apply-now”></i>

That’s it! Fontastic includes all the needed base CSS in the ‘styles.css’ file so from here, feel free to get started theming them to match the existing design of the project.

Implementing these icons can be taken a step further by integrating them with a CMS such as Drupal. In order to achieve this, download the Icon module for Drupal which allows users to do things such as select an icon for a custom field and set an icon to a menu link. The module also provides an API that is simple to work with. The custom module hooks into several calls that:

  • Makes the Icon module aware of our added custom set of icons
  • Sets a prefix to be used by default. ‘icon-’ in the case of Fontastic’s default settings
  • Assigns our custom classes to the icon names. Since a less technical client of ours might be updating these themselves, we opted to set the name to be the same as CSS class so the process could be as copy-and-pastable as possible

An example Drupal module

Once this is all set and the module is installed and enabled, our custom set of icons will now be visible wherever the Icon module is used.

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • Evernote

Another benefit of using a font family for custom icons is that it can be easily integrated with popular WYSIWYG editors so that users can simply select the font and type the corresponding letter to use the icons as they author content. We chose to work with CKEditor due to its strong feature set and ease of use for the client. Since the ‘styles.css’ stylesheet has already been included in the project, all that remains is letting our WYSIWYG editor know about the custom font we wish to use. In the case of CKEditor, we would add a config option to the editor like so:

config.font_names = 'Arial;Times New Roman;Verdana;Custom Icons/custom-icons';

Above, we specify the display name that the user will see as “Custom Icons” and the font-family font name as ‘custom-icons.’ Adjust this based on the font name found in ‘styles.css.’ Now, using the previously mentioned icons-reference.html from Fontastic, we can set our font to ‘Custom Icons’ and hit the ‘b’ key to have the ‘Apply Now’ icon displayed as shown above.

Get More Mileage out of Your Custom Icons

An added benefit to creating an icon font is that you can provide the TTF file to your client so they can use the font to insert the custom icons into their other marketing materials. This allows them to make all their collateral consistent with their website.

It’s always nice when you can provide a benefit to a client they weren’t expecting. Using custom icon fonts provides some opportunities to do just that especially since adding them to an existing project could not be easier.

 

Comments

  1. subbot says

    I love reading through and I believe this website got some genuinely utilitarian stuff on it! .

  2. roblox account generator says

    I’m impressed, I have to admit. Genuinely rarely should i encounter a weblog that’s both educative and entertaining, and let me tell you, you may have hit the nail about the head. Your idea is outstanding; the problem is an element that insufficient persons are speaking intelligently about. I am delighted we came across this during my look for something with this.

  3. Peter Grant says

    Thanks for another informative blog. Where else could I get that type of info written in such an ideal way? I have a project that I’m just now working on, and I’ve been on the look out for such info.

  4. Jasmine Taylor says

    Hiya, I am really glad I have found this info. Nowadays bloggers publish just about gossip and net stuff and this is really frustrating. A good blog with interesting content, this is what I need. Thanks for making this website, and I’ll be visiting again. Do you do newsletters? I Can’t find it.

  5. Carl Ogden says

    Heya! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no backup. Do you have any methods to protect against hackers?

  6. Alan Wilkins says

    I would like to thnkx for the efforts you have put in writing this site. I’m hoping the same high-grade web site post from you in the future as well. In fact your creative writing abilities has encouraged me to get my own web site going now. Really blogging is spreading its wings and growing rapidly. Your write up is a great example.

  7. Connor Mathis says

    Hmm is anyone else having problems with the images on this blog loading? I’m trying to figure out if its a problem on my end or if it’s the blog. Any suggestions would be greatly appreciated.

  8. Brian Randall says

    Having read this I thought it was really enlightening. I appreciate you finding the time and effort to put this short article together. I once again find myself spending a significant amount of time both reading and commenting. But so what, it was still worthwhile!

  9. Brandon Sutherland says

    Hi are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you require any html coding knowledge to make your own blog? Any help would be really appreciated!

  10. Gavin Powell says

    Hello my friend! I want to say that this post is awesome, nice written and include approximately all important infos. I would like to see more posts like this.

  11. Lily Peters says

    Hey! Someone in my Myspace group shared this site with us so I came to give it a look. I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers! Superb blog and brilliant design.

  12. Kevin Davies says

    Thanks for your post right here. One thing I’d like to say is the fact most professional fields consider the Bachelor Degree as the entry level requirement for an online college degree. Whilst Associate Degrees are a great way to get started, completing your current Bachelors reveals many entrance doors to various occupations, there are numerous internet Bachelor Diploma Programs available from institutions like The University of Phoenix, Intercontinental University Online and Kaplan. Another issue is that many brick and mortar institutions make available Online variations of their degree programs but typically for a considerably higher fee than the corporations that specialize in online education plans.

  13. Evan Buckland says

    There are actually plenty of particulars like that to take into consideration. That could be a great level to deliver up. I supply the thoughts above as common inspiration but clearly there are questions just like the one you carry up where a very powerful factor can be working in honest good faith. I don?t know if best practices have emerged round issues like that, however I’m sure that your job is clearly recognized as a good game. Each girls and boys really feel the impact of only a second’s pleasure, for the rest of their lives.

  14. historia de algunos electro domesticos usados says

    Obviamente, por la misma seguridad”, la copia de tu disco duro (que resulta que sí hacen, por si las moscas), se borra al poco de salir el portatil de vuelta para su dueño. Los del PC City como los tuyos de la FNAC, esquivando balazos y dando a entender que estas cosas no te pasan sólo a ti y con idea tirando a nula de si tu portátil estuvo en un sitio u otro. Y sobre el servicio postventa no tengo ninguna queja, ya que alguna vez me han tramitado una garantía y ha ido todo muy bien (y no he tenido que gritar, ni insultar). Al día siguiente llamo al servicio de BALAY y compruebo que mi frigorífico había pasado justamente la garantía de 2 años dos tres meses antes.

  15. Virginia Clark says

    I also like Flash, but I am not a good designer to design a Flash, but I have software program by witch a Flash is automatically produced and no extra to hard working.

  16. Trevor Sanderson says

    Since the YouTube movies are posted here same like I also embed YouTube video code at my own web site, because it is easy to obtain embedded code.

  17. Eric Buckland says

    I like what you guys are up to. Such smart work and reporting! Carry on with the superb works guys. I have incorporated you guys to my blogroll. I think it will improve the value of my site. 🙂

  18. Samantha Metcalfe says

    Great – I should definitely pronounce, impressed with your web site. I had no trouble navigating through all tabs as well as related info ended up being truly simple to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or something, website theme . a tones way for your client to communicate. Nice task..

  19. Julian Rutherford says

    Hello there, just become aware of your weblog through Google, and found that it’s truly informative. I am gonna be careful for brussels. I will be grateful for those who proceed this in future. A lot of people shall be benefited out of your writing. Cheers!

  20. Lily Newman says

    I have discovered that expenses for internet degree experts tend to be an awesome value. For instance a full College Degree in Communication from The University of Phoenix Online consists of 60 credits with $515/credit or $30,900. Also American Intercontinental University Online provides a Bachelors of Business Administration with a entire course feature of 180 units and a tariff of $30,560. Online degree learning has made getting your college diploma much simpler because you can easily earn your degree in the comfort of your abode and when you finish working. Thanks for all other tips I have certainly learned through your web site.

  21. Jasmine May says

    I’m impressed, I need to say. Actually not often do I encounter a weblog that’s both educative and entertaining, and let me inform you, you might have hit the nail on the head. Your thought is outstanding; the issue is one thing that not sufficient persons are speaking intelligently about. I’m very glad that I stumbled throughout this in my seek for something referring to this.

  22. Evan Sutherland says

    Another issue is really that video gaming became one of the all-time biggest forms of entertainment for people of every age group. Kids engage in video games, and adults do, too. The particular XBox 360 is among the favorite gaming systems for individuals that love to have a lot of activities available to them, in addition to who like to play live with other individuals all over the world. Thank you for sharing your opinions.

  23. Claire Ball says

    I think a visualized presentation can be superior then just a easy text, if things are defined in pictures one can simply understand these.

  24. David May says

    In the present day I was so tired, and now this time I have got some relax by viewing this funny YouTube video, thanks, keep it up.

  25. CNC acero inoxidable says

    INMEC CNC de Colombia realiza mecanizados de piezas únicas, en pequeñas y grandes series, según plano muestra proporcionada por el cliente. Dependiendo del grado de suciedad las herramientas pasan automáticamente a un baño de limpieza. Por supuesto, siempre de la mano de nuestro equipo de profesionales e ingenieros que apoyados en los avances tecnológicos nos han consolidado como empresa de mecanizado CNC en Valencia de referencia.

  26. Eric Hardacre says

    Because the YouTube videos are posted at this place same like I also embed YouTube video code at my own site, as it is effortless to obtain embedded code.

  27. Dorothy Alsop says

    I like the valuable info you provide in your articles. I’ll bookmark your weblog and check again here frequently. I’m quite sure I will learn many new stuff right here! Best of luck for the next!

  28. Leah Blake says

    I was recommended this blog by my cousin. I’m now not sure whether this publish is written by him as no one else realize such unique approximately my problem. You’re wonderful! Thank you!

  29. Dan Fisher says

    Pretty nice post. I just stumbled upon your blog and wished to say that I’ve truly enjoyed surfing around your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again very soon!

  30. calderas peisa says

    Nuestro SERVICIO TÉCNICO Siemens de electrodomesticos, están disponibles de lunes a viernes de 9 a 20h y sábado de 9 a 2h llámenos cuando lo requiera. Hacemos un seguimiento de todo el proceso de la reparación desde que nos notifica el aviso hasta que da su conformidad a la reparación. Tener más de 24 anos de experiencia no significa que no hayamos evolucionado, nosotros no hemos parado de evolucionar y perfeccionar nuestros servicios. Balay presenta placas de inducción y vitrocerámicas con control de temperatura del aceite para freír a la temperatura adecuada.

  31. Warren Johnston says

    Good write-up, I’m normal visitor of one’s web site, maintain up the nice operate, and It is going to be a regular visitor for a lengthy time.

  32. Frank Parr says

    I have seen that car insurance organizations know the autos which are prone to accidents and other risks. In addition, they know what type of cars are prone to higher risk as well as the higher risk they’ve got the higher the premium charge. Understanding the simple basics of car insurance will help you choose the right style of insurance policy that could take care of your requirements in case you become involved in an accident. Many thanks sharing the particular ideas with your blog.

Leave a Reply

Your email address will not be published.