Fontawesome: how to insert the code

How to Install FontAwesome FontAwesome is a font of scalable vector, which can be customized by color, size, and just about any attribute that you can change using CSS. Setting up this font can be as simple as adding 2 lines of code to your site. By following several steps, you will be able to install this program on the COS easily and successfully. 

  1.  You need to first copy all the code from the font-awesome file from your downloaded file, and make sure that you will choose all the codes. 
  2. Then, paste the code into your CSS file. For a more specific explanation, you will need to navigate to Content, and then the Design Manager. After that, locate and access your stylesheet and there you can paste the code that you copied from the first step within your stylesheet, and save it properly. 
  3. You can then publish your CSS file.  
Now that you are ready using FontAwesome, this font will then be applied to elements with the class=tw, as well as a class particular to the icon that you would want to render, like for instance (class=tw-twitter). You need to keep in mind that this is not going to work in email. Furthermore, you have to be aware that the class elements cannot be used with the WYSICYG editors’ secure code. 

While you try implementing this program, it would be best if you use span tags, such as span class...͟. If you will use the default Hubtheme of HubSpot, this great font is already included in the hubtheme CSS, and you will be able to use the shortcodes mentioned in order to render the font icons. However, in FontAwesome, you need to keep in mind that the shortcodes are just available in the Hubthme, for they are requiring a special Javascript file. 

Alternative steps to installing FontAwesome 

As an alternative on copying the code into your current CSS file, you will be able to add some link tag to the head tag of your Template Head Tag or Content Settings HTML section.

To be able to provide the best experience possible to the buggy and old browsers, FontAwesome is using CSS browser hacks in some places in order to target special CSS to particular browser versions to work around bugs in the browsers themselves. These hacks are understandably cause the CSS validators to complain that they are invalid. In several places, it is using some innovative CSS features, which are still not completely standardized, but they are purely used for progressive enhancement. These warnings on validations do not matter in practice, for the non-hacky portions of CSS is doing complete validation and the hacky portions are not interfering with the appropriate functioning of the non-hacky portion, thereby, the reason it is okay to deliberately ignore these certain warnings.

If you are having trouble with FontAwesome, you should consider asking professional help to prevent corrupting your programs and other files, due to wrong installation process. If you successfully installed this font, you can start enjoying all the benefits provided to you.