Author: Raghavendra Hegde

3 Steps to Create your Own Font Icon from Photoshop Icon

In the history of the Web, designers have tried a variety of methods to use icons and images on websites. This includes, to name a few: importing bitmap image files (usually transparent PNGs), vectoring SVG files, or even using web fonts containing symbols instead of typical characters from the alphabet.  Using non-standard fonts has become the standard in web development in recent years, leading to the rise of icon fonts.

Advantages of Font Icons

Displaying icons through fonts is no different from using alternative fonts for headers, titles, and paragraphs. Implementing icons as a web font has many advantages:

  • Icons are scalable without loss in definition
  • There is no need to worry about Retina displays
  • It is easy to apply CSS properties without editing the icon itself (color, gradient, shadows, etc.)
  • You can use the same icon in different sizes and colors to save time and space
  • Better page speed performance (i.e. fewer http requests)
  • Icon fonts load faster than background or inline SVG’s

Now, let’s create a font icon…

Creating Icons

In order to create a font icon, the icon has to be in the SVG (Scalable Vector Graphics) format. You can download SVG icons from various sites like iconfinder.com. But here I will tell you how to create icons from Photoshop, then convert this to SVG format and as a final step, convert the SVG format to font.

Step 1.

First, we need to create nice icon in Photoshop then save as PNG.

Step 2.

After saving the image you have to convert the PNG image to SVG image. To do that you have lot of online image converter tool – among them http://picsvg.com/ and http://picsvg.com/.

Upload your image:

Choose proper filters and download the converted SVG icon.

Step 3

Converting to SVG is done. Now we have to convert that SVG to font by using http://fontello.com/ or https://icomoon.io/. To demonstrate this, I am using icomoon here.

Import your saved SVG icon in icomoon clicking on “Import Icons” button.

You can arrange, enter Meta details and change grid size etc. by using right side hamburger menu:

If you want to edit, move, or delete the icon, you can do it by choosing the button which is highlighted in the following snapshot:

After all the editing is completed,  click on `Generate font’:

Rename all the icons and define a Unicode character for each (optional):

Download the generated files:

That’s it!!! The icon font you have just generated consists of various font formats (for cross-browser compatibility) and demo files, including HTML and CSS.

The Elements and Attributes You Should Avoid in HTML5

Elements you should avoid:

After the introduction of several new elements in HTML5, it is now time to talk about what you should be avoiding in HTML5.

Ever since CSS was invented, web developers have been always told to segregate design from content. Let CSS take care of the styles and HTML take care the structure and content of your page.

In HTML5, the life of the following elements have come to an end. They have no role to play because CSS has grabbed it all:

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <strike>
  • <tt>
  • <u>

The following elements have nothing to do with styling but they are simply the bad guys in HTML coding because they have been blamed of “damaging” usability and accessibility:

  • <frame>
  • <frameset>
  • <noframes>

The following elements are not included in HTML5 because they have not been used often, created confusion, or their function can be handled by other elements:

  • <acronym> is gone, use <abbr> instead for abbreviations.
  • <applet> has been obsoleted in favor of object.
  • <isindex> usage can be replaced by usage of form controls.
  • <dir> has been obsoleted in favor of <ul>.
  • Finally the <noscript> element is only conforming in the HTML syntax. It is not included in the XML syntax as its usage relies on an HTML parser.

If you still insist on using these elements, you web page will not blow, and yet, the web browser will still be supporting it. However, the cost of doing this is – your page will not pass  HTML5 validation!

Attributes you should avoid:

In HTML5, none of the attributes should be used for styling purposes. The rule of the thumb is, styling should be taken care of by CSS.

What I mean by  “styling” is, attributes such as font size, color, border, and font family, etc. i.e. whatever is used for presentational purposes.

In the table below are listed the attributes that you should avoid using:

Attributes Elements
align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
alink, link, text and vlink body
background body
bgcolor table, tr, td, th and body
border table and object
cellpadding and cellspacing table
char and charoff col, colgroup, tbody, td, tfoot, th, thead and tr
clear br
compact dl, menu, ol and ul
frame table
frameborder iframe
height td and th
hspace and vspace img and object
marginheight and marginwidth iframe
noshade hr
nowrap td and th
rules table
scrolling iframe
size hr
type li, ol and ul