Skip to content

Instantly share code, notes, and snippets.

@mcalthrop

mcalthrop/font-awesome-icons-as-characters.html

Last active December 8, 2015 11:22
Show Gist options
  • Save mcalthrop/62dd6dc395bf2864f6af to your computer and use it in GitHub Desktop.
Save mcalthrop/62dd6dc395bf2864f6af to your computer and use it in GitHub Desktop.
Download ZIP
Font-awesome icons as characters
Raw
font-awesome-icons-as-characters.html
<html>
<head>
<title>Font-awesome icons as characters</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
* {
font-family: Helvetica, Arial, sans-serif;
}
.fa-char {
font-family: FontAwesome;
font-size: 24px;
}
td {
min-width: 100px;
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
</head>
<body>
<p><a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">Font-awesome icons</a></p>
<table>
<thead>
<tr>
<th>Dec</th>
<th>Hex</th>
<th>Entity</th>
<th>Icon</th>
</tr>
</thead>
<tbody>
<script>
var numbers = _.range(0, 670);
_.each(numbers, function (number) {
// example: &#xf000;
var hexNumberString = this.padLeft(number.toString(16), 3, '0');
document.writeln('<tr><td>' + number + '</td><td>' + hexNumberString + '</td><td>&amp;#xf' + hexNumberString + ';</td><td class="fa-char">&#xf' + hexNumberString + ';</td></tr>');
}, _);
</script>
</tbody>
</table>
<p>
<span class="fa-char">&#xf10b;</span>
<span class="fa-char">&#xf109;</span>
<span class="fa-char">&#xf206;</span>
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment