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:
Two: Add the form
Next we add a form where people can input an icon-code from the fontawesome-library
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. =$iconclass;?>