Having trouble or got a specific question for us? We're here to help.
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!
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!
In addition to serving your icons, Fort Awesome can also serve up your traditional typographic Typefaces. You can choose from a few of the best free fonts or upload you own. We'll even help with sub-setting to just the languages you need to speed things up even more!
Each time one of your pages with a Fort Awesome kit is viewed, a pageview is counted. Pageviews are counted on a monthly basis.
For Basic Plans and above, we offer direct online help (via live chat or email). Our team is here to help you understand how to get started, get the most out of your Fort Awesome plan, and address any issues or concerns you may have.
Note: This service is not available 24 hours a day - we generally will address questions and issues within the next business day.
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.
Still need help getting started? Check out our how-to article on using icons.
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.
Still need help getting started? Check out our how-to article on serving your kit's assets yourself.
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.
Still need help getting started? Check out our how-to article on use your kit's assets on the desktop.
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.
Icons are symbols that can convey a ton of information and really help people comprehend directions, signs, and interfaces. Its important that we create and use them so that they can reach the largest amount of people possible. That means making sure our icons play well with technology that helps people navigate and use apps and sites.
According to this article, there are a potentially surprising number of folks with sight and hearing impairments: Blindness, low vision, and visual impairment represent 8.4% of the total world population and disabling hearing loss represents 5.3% of the total world population.
We've built-in ways to help technology that supports impairments, like screen readers, either ignore or better understand the Font Awesome icons you're using. In short, we try to help with the following cases:
If you're using an icon to add some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Additionally, if you're using an icon to visually re-emphasize or add styling to content already present in your HTML, it does not need to be repeated to an assistive technology-using user.
If you're using an icon to convey meaning, ensure that this meaning is also conveyed to users who may be interacting with your UI using different methods or tools by providing text-based alternatives. This goes for content you're abbreviating via icons (e.g. shopping cart status, number of unread messages, etc.) as well as interactive controls (e.g. buttons, form elements, toggles, etc.).
If enabled as a feature in your kit's icon settings, Fort Awesome will try to identify the scenarios above in your UI as well as provide the modern and proper syntax assistive technologies recognize. For icons that have semantic or interactive meaning, this means you'll need to provide a proper text alternative to be used. Here's how:
Fort Awesome's auto accessibility feature will make sure it is ignored by assistive technology. There's nothing extra you need to on top of how you would usually reference an icon.
Here's what your markup should be:
<button type="submit">
<i class="fa fa-envelope"></i> Email Us!
</button>
And Fort Awesome changes that to the following:
<button type="submit">
<i class="fa fa-envelope"></i> Email Us!
</button>Fort Awesome's auto accessibility feature will try to apply a fallback alternative for the icon based on any any alternatives and configuration you set on the icon.
Here's what your markup should be:
<button type="submit">
<i class="fa fa-arrow-right" title="Submit My Tax Return"></i>
</button>And Fort Awesome changes that to the following:
<button type="submit">
<i class="fa fa-arrow-right" title="Submit My Tax Return"></i>
<span class="sr-only">Submit My Tax Return</span>
</button>When a web page loads, there are often many requests for files needed to render the interface and content. This can create a line of assets and information waiting to be understood and then presented by the browser. Some of the requests, such as initial or very important content and basic layout styling, may be needed right away. Others, such as icons, typefaces, and images, may not be as critical to load for users first. To help speed up the loading of pages, its wise to delegate the latter to loading after the critical set.
If enabled as a feature in your kit's icon settings, Fort Awesome will move the loading of your kit's icons and supporting styling from the critical request order and load them on a parallel track when the browser is available to.
We're here to help, but there may be some limitations. If something's wonky or not working as expected with Fort Awesome, we'll make that right 100% of the time. We'll also lend a hand managing and using your icons and assets. But, we're not experts in content management systems or front end workflows you or your company may be using. We may make recommendations or try a few things, however, we can't promise we'll be able to provide a solution or the time needed to resolve things at that level.
Our team shares the support load for all of our products (we love doing it this way as it helps us learn how to make things better for you). If you've contacted us, you should be hearing back from someone on our team within a business day or two (barring any US-centered holidays).
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.
FYI, Our team generally replies to within a business day or two.