font awesome viewer

Font Awesome Icon Viewer Form

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:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

One: Layout your html-document:

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

<!DOCTYPE html>
<html>
<head>
<title>FontAwesome Viewer</title>
<meta charset="utf-8" />
</head>
<body>
<h1>FontAwesome Viewer</h1>

</body>
</html>

Two: Add the form

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

<!DOCTYPE html>
<body>
<h1>FontAwesome Viewer</h1>
<form action="fontawesome_viewer.php" method="post">
<label for="icon_input">Icon Input</label>
<input type="text" name="icon_input" id="icon_input">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
</body>

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.)

<head>
<title>FontAwesome Viewer</title>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>

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.)

<head>
<title>FontAwesome Viewer</title>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<?php
if(isset($_REQUEST['submit'])) {
$iconclass = htmlentities($_REQUEST['icon_input']);
}
?>
</head>

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.

</form>
<?php
if(isset($_REQUEST['submit'])) {
?>  
<br>
<h3>Your Icon</h3>
<br>
<br>
<i class="fa <?=$iconclass;?>"></i>
<br>
<br>
<?=$iconclass;?>
<?php
}
?>
</body>

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.
<style type="text/css">* {margin:0;padding:0;text-align:center} i {font-size:10em}</style>

Completed Code

Here is the completed project for reference.

<!DOCTYPE html>
<html>
<head>
<title>FontAwesome Viewer</title>
<meta charset="utf-8" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style type="text/css">* {margin:0;padding:0;text-align:center} i {font-size:10em}</style>

<?php
if(isset($_REQUEST['submit'])) {
$iconclass = htmlentities($_REQUEST['icon_input']);
}
?>
</head>
<body>
<h1>FontAwesome Viewer</h1>
<form action="fontawesome_viewer.php" method="post">
<label for="icon_input">Icon Input</label>
<input type="text" name="icon_input" id="icon_input">
<input type="submit" name="submit" id="submit" value="Submit">
</form>
<?php
if(isset($_REQUEST['submit'])) {
?>  
<br>
<h3>Your Icon</h3>
<br>
<br>
<i class="fa <?=$iconclass;?>"></i>
<br>
<br>
<?=$iconclass;?>
<?php
}
?>
</body>
</html>

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.

Thanks For Sharing!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn