#AWESOME FONT GLYPHS HOW TO#

You can use the existing Font Awesome font files in your SuiteCommerce or SuiteCommerce Advanced bundle as the basis for new ones (ie add your new icons to them).

#AWESOME FONT GLYPHS HOW TO#

ItвЂ™s hard to know how to phrase this option: itвЂ™s not really extending Font Awesome, because youвЂ™re not necessarily doing what you do with JavaScript youвЂ™re not replacing it because there are many constituent parts, and some can just be edited. IcoMoon then outputs a number of font files that contain your images.ДЇrom there, youвЂ™re essentially following the aforementioned steps on adding a custom web font. I converted it into an SVG and then begun the process to create a font in IcoMoon. Note, however, that this service requires images to be in SVG format therefore, if youвЂ™re using a raster graphic (eg PNG, JPG or GIF) then you will need to convert it (again there are online services for this if you donвЂ™t have the means to do it yourself).ДЇor my example, I wanted to create a font file to show off some logos, including the NetSuite logo. This may be particularly useful, for example, if you need to include a logo. One of the benefits of this kind of service is that it lets us upload our images, which can then be included in the new font. WeвЂ™re using it now because of the easy-to-use interface that makes it easy to select the ones we want before it generates a file for us. They offer a number of services for free, with others available for a fee.

NetSuite does not recommend any particular service, but for the purposes of this demonstration, we will look at IcoMoon (please see their terms of service before using them). The truth is, manually creating your own will be a lot of work but there are services available on the internet that can generate the fonts for us. Thus the crucial information in this part is not the mechanism of delivering the font, but creating it. Option 1: Use Your Own FontД«efore beginning, it is worth pointing out that we have a separate page on adding a custom web font to your web store - you should read that first as it will contain the same mechanisms required to get this to work. However, if youвЂ™re delivering a customization through an extension, then you should create a separate, custom font that has your new icons in that. We will look at both, but itвЂ™s probably better to look at option 2, rather than option 1, especially if you only have one or two icons you want adding. Replace the Font Awesome font with your own version so it includes your new iconsД¬reating a new font has the appeal of a вЂcleannessвЂ™ to it as it means you can leave our core declarations alone, but it increases the number of HTTP calls youвЂ™ll make, and we donвЂ™t have specific advice on using them within your templates (ie they are not necessarily compatible with the existing way we have implemented Font Awesome).Create your own font that includes your new icons.If you are sure you need to add new icons, then there are two paths you can take: In more recent times, people have also used SVG sprites and emoji.Д«efore considering introducing your own icons, make sure you check out the Font Awesome library to see if there is one that already applies (be sure to check the version that applies to the one in your code). There are many ways of delivering icons to a website, the evolution of which has gone from individual image files (which creates a lot of HTTP requests) to flat sprites (which cuts down on HTTP requests) to icon fonts, which is what NetSuite Commerce uses.

As visual hints - as a little nudge in the right direction for example, if we want the user to enter a date, we can show an icon of a calendar next to the input field.

As reinforcements for text - for messages, such as errors, icons cause the message to stand out and become stronger for actions, we use them with text where icons alone wouldnвЂ™t suffice.

As substitutes for text - this only applies when an icon is universally understood to mean something, eg, a magnifying glass as a icon for search.

While we include a wide library of them by default, it is also possible to add your own.Д«roadly speaking, there are three main reasons to use an icon: NetSuite Commerce sites use Font Awesome to provide icons on the siteвЂ™s frontend.

Awesome font glyphs