Oi. Your browser is not supported.

Your browser is too old and missing some key goodies. To manage your assets with Fort Awesome, you'll need to use a more modern web browser.

Help

Having trouble or got a specific question for us? We're here to help.

Frequently Asked Questions

  • What is a Kit?


    A Kit is a collection of icons, CSS, settings, and traditional typographic fonts. You typically have one per website.

    Icons

    Optimize your kit down to just the icons your site needs, saving valuable bandwidth and making your site load faster.

    CSS

    Fort Awesome has the same great CSS used by Font Awesome. Optimize your kit further and load just the CSS you need!

    Settings

    Change your CSS prefix, set the domains allowed for your Kit, and customize icon names.

    Typefaces

    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!

  • What are Icon Fonts?


    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.

  • What's in the Starter Icon Library?


    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.

  • What are Custom Icons?


    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!

  • What are Typefaces?


    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!

  • What's a Pageview?


    Each time one of your pages with a Fort Awesome kit is viewed, a pageview is counted. Pageviews are counted on a monthly basis.

  • What customer support do you offer?


    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.

  • How do I use my kit?


    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.

    Publish Your Kit

    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.

    Reference Your Kit in Your Code

    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

    If you're switching over to Fort Awesome from an existing icon font, don't forget to remove it from your website.

    If you're using Fort Awesome alongside an existing icon font (like Font Awesome), remember to use a different CSS prefix.

    Call icons and typefaces in your UI

    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.

    Publish Your Kit

    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.

    Download Your Kit

    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.

    Call icons and typefaces in your UI

    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.

    Publish Your Kit

    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.

    Download Your Kit

    After your kit has been published, you'll want to download a fresh copy of your kit's contents locally.

    Use Icon Fonts or SVGs

    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.

  • Hey, Fort Awesome. What browsers do you support?


    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

  • Do I need any other software to use Fort Awesome?


    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.

  • What do you mean by Auto Accessibility?


    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:

    1. Using Icons are Decorative Elements

      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.

    2. Using Icons for Semantic or Interactive Purposes

      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:

    For icons that are decorative

    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>

    For icons that have semantic or interative meaning

    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>
  • What are asynchronously loading icons?


    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.

  • How do embed codes work after upgrading from Font Awesome CDN?


    Any Font Awesome CDN embed codes that you've upgraded into Fort Awesome Kits will still remain intact and operational. You can continue to use them for other projects or fall back to them at any point you stop using Fort Awesome.

Contact Us

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.