I ran in to the problem a while ago that I needed to use a Font Awesome icon in a design-comp. In retrospect I should have downloaded and installed the font… Instead I made a form where users submit the name of the icon they want to view.

Being one to make lemonade from lemons I’ve decided to post the “how-to” here in case anyone would like to use it to get used to using font-awesome and using forms with php.

I think it could make a nice lesson for the right students.

If you do use this tutorial, please note that how font-awesome is embedded in your site has changed. As of this update fontawesome cdn requires an account sign-up to embed the font. So the link below may not work, but you can find a work-around:

One: Layout your html-document:

create a new-file called “font_awesome_viewer.php” and add the following code:








FontAwesome Viewer

Two: Add the form

Next we add a form where people can input an icon-code from the fontawesome-library



FontAwesome Viewer

Three: Inculde the Font-Awesome font

Time to include a link to the font-awesome font (where all of our icons are stored as characters in vector-format – so they resize with precision.)




Four: Check if the form has been submitted

Net we’ll use a php “if”-condition to check if the input-element with the name of “submit” has been sent to the server. If that has happened we assign the input with the name of “icon_input” to the $iconclass variable (after it’s been screened by php’s htmlentities function, to help make sure users can’t submit code through our text-input.)





Five: If the form has been submitted, display our icon

Font Awesome uses the “i”-element to attach font-awesome icons / characters to. Here we display an icon which uses the variable sent to it by the form (preferably a font-awesome icon-code) to determine which icon to display.

Your Icon

Six: Add some style to the icon

The icons will render at whatever font-size the sibling-text is… Let’s add a bit of css to make our icon “pop” a bit more.

Completed Code

Here is the completed project for reference.






FontAwesome Viewer

And there we have it. Users can type in the name of any icon they want and submit it to view the specified icon. Font Awesome is a really great tool. I hope that if you aren’t already using it that you will start.