Having trouble or got a specific question for us? We're here to help.
The traditional font container turns out to be a great way to deliver icons on the web. They're vector graphics, which means they scale up perfectly and look awesome on retina. And just like with traditional typography, you can easily change an icon's size, color, drop shadow, or anything else that's possible with CSS.
Paid plans get access to our Starter Icon Library, which includes thousands of icons from tons of icon sets. Want to see them all? You can check out the full list and browse our icon sets.
Vector icons are awesome on websites, but they can be a pain. Fort Awesome makes all that easy. You can copy and paste vector icons out of Illustrator CC and into Fort Awesome, or you can upload your own SVG file. Add your company logo, an icon that's missing from your favorite set, or anything else you need!
A Kit is a collection of icons, CSS, settings, and traditional typographic fonts. You typically have one per website.
Optimize your kit down to just the icons your site needs, saving valuable bandwidth and making your site load faster.
Fort Awesome has the same great CSS used by Font Awesome. Optimize your kit further and load just the CSS you need!
Change your CSS prefix, set the domains allowed for your Kit, and customize icon names.
Choose from a few of the best free fonts or upload your own. We'll even help with sub-setting to just the languages you need to speed things up even more!
Already started a kit for a project or site? Great! If not, set up a new one in a few seconds. Once you've added some icons, typefaces, and settings, you've got a few options for easily using your kit in your project.
The easiest way to use your kit - no need to manually update source files, maximum performance optimization, and use your kit with a single line of code.
When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's documentation and bust any caches (with extreme prejudice). If you've made a change you want to use, make sure you publish.
After your kit has been published, copy and paste the kit's unique embed code into the
HTML of your website. Make sure it goes near the top of your <head> tag.
Example embed code
You'll then be able to call your icons and typefaces as you've set them up. Each kit comes with detailed documentation on how to reference every asset you've added. Be sure to read and share it with your team.
Want to place your files just so and serve them up your way and in your existing workflows? We completely get that. You can do so while still getting Fort Awesome's variety, customization, and bulletproof rendering.
When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's documentation and bust any caches (with extreme prejudice). If you've made a change you want to use, make sure you publish.
After your kit has been published, you'll want to download a fresh copy of your kit's contents and move them alongside your project's files.
Directly in your code, you'll then be able to call your icons and typefaces as you've set them up. Each kit comes with detailed documentation on how to reference every asset you've added. Be sure to read and share it with your team.
Looking to use your kit's icons in design-based desktop apps? You can them both as a icon-font (a la how you would use Font Awesome's cheatsheet) or leverage the raw SVG versions of each.
When you publish, Fort Awesome packages up and optimizes all of your assets. We also refresh your kit's documentation. If you've made a change you want to use, make sure you publish.
After your kit has been published, you'll want to download a fresh copy of your kit's contents locally.
Find the *.otf files in your downloaded kit, set it as the font in your current desktop application, and copy and paste the icons (not the unicode) directly from your kit's documentation into your designs. Conversely, you can also open any of the individual *.svg files for deeper manipulation.
In order to manage your assets quickly and effectively, Fort Awesome's UI requires that you use a modern web browser. Here's a list of browsers we support:
We know making sure your site or app look good across browsers is important. So, if Fort Awesome's CDN is serving your icons and assets, you can expect your assets and icons to look awesome in the following browsers:
* We support at least the latest 2 versions of the the above browsers.
** We cannot support Opera Mini (as well as Blackberry's mobile browser) as it does not support the CSS @font-face feature
You won't need any other external software to use our tools or work on your kit.
If you want to upload custom icons into your kit, you'll need Adobe Illustrator CC or above to copy and paste directly from Illustrator. If you're working with older versions and other programes (like Sketch), you can always upload custom icons with an .svg file.
Have questions about Fort Awesome?
Want to know how to do something specific?
Got a great idea or bone to pick? We'd love to hear it.
Get in touch with us.