How Do I Upload Iconmoon Icon Fonts to Website

What is IcoMoon?

IcoMoon is an icon solution, providing three main services: vector icon packs, the IcoMoon App, and hosting icons equally SVGs or fonts. Read further to learn more than about these services.

Icon Packs

IcoMoon provides many gratuitous icon packs. You tin find them in the library tab of the IcoMoon app. Each of them take a license link that you tin can refer to. Bated from these free icon packs, IcoMoon also provides three high quality premium icon packs which tin only be purchased separately.

IcoMoon App

Head over to https://icomoon.io/app using a modern spider web browser to commencement using the IcoMoon app. This HTML5 application allows yous to speedily browse and search for the icons you need. You can download these icons, do some basic editing, import your own icons, make icon fonts (a font with icons equally its glyphs) or generate icons in SVG, Polymer, PDF, XAML, PNG and CSS sprites.

This app is besides available in the Chrome Spider web Store (runs offline).

Selecting Icons

Yous can simply click on an icon prison cell to select or deselect it. You may too elevate to select a group of icons. If you click on an icon cell to select it, and and then agree down the Shift central when selecting some other icon, all the icons in betwixt these two icons will be selected.

Note: By selecting only the icons that you really need, you can keep the size of your fonts down. Past loading your font back to the app, you can always add more icons to your selection afterward.

Editing Icons

To edit an icon, use the edit/pencil button then click on an icon cell. This will bring upwardly the edit panel. The edit panel allows you to perform some simple modifications (such equally rotating or mirroring), edit tags, alter the grid size given to your icons, etc.

Pro Tip: Instead of pressing the pencil button, you could agree downward the pick/alt cardinal and and so click an icon prison cell to bring up the edit panel.

If you need to arrange how your icons marshal with text, y'all tin can apply the edit panel and use the Move Up and Move Down buttons.

Importing your own vectors

Y'all tin can import your own SVG images or SVG fonts to the IcoMoon app.
If you import an SVG font, the glyphs in the font will get extracted and imported.

If your SVG didn't become imported properly, consider the following guidelines:

• Strokes go ignored when generating fonts or CSH files.
  You lot can catechumen/aggrandize strokes to fills.
• The current version of IcoMoon doesn't fully support evenodd fills. Use nonzero fills instead.
• Text elements get ignored. You could convert them to fills.
• Unite/combine your fills and avoid overlapping paths.
• Instead of using white fills for making holes, subtract the shape in the front from the shape in the back. In Adobe Illustrator, this can exist done using the Pathfinder window. In full general, avoid overlapping shapes with the same colour.
• Calculation a bitmap image (PNG, JPEG, etc.) to an SVG image does non make it vector. Bitmap images embedded in SVGs get ignored.

If you still had problems importing your SVGs, contact united states. Nosotros'll effort to assist equally soon every bit possible.

Pro Tip: You tin use drag and driblet to import your SVG files. In order to import your SVGs to the same gear up, you can either use the carte on top right of each set and cull the Import to Set pick, or elevate your SVGs and drop them on acme of the set you want to import them to.

Pro Tip: If you import an SVG with a filename similar home#house#building-U0xE999, information technology gets imported with three tags (home, business firm, building) and will accept a default code of E999 when used for making a font.

Converting Strokes & Text to Fills

The current version of the IcoMoon app ignores strokes when generating fonts or CSH files. But you lot can convert strokes to fills in different vector editing programs:

Adobe Illustrator

Select the shapes that you want to convert and then choose Object → Expand. You might need to choose Object → Expand Appearance before you tin apply Object → Expand.

Ink Scape

Select the shapes that yous want to convert so cull Path → Stroke to Path.

Sketch

Select the shapes that you want to convert and choose Layer → Convert to Outlines

Making a Font

Select the icons that you want to have in your font and then press the Generate Font button at the bottom of the app. This will generate a font and brings up a preview of it. To encounter the Unicode characters assigned to each glyph, press the U+ button on the toolbar of the font tab.

To change the character assigned to a glyph, merely modify the text field located at the bottom right of each glyph. For example, if you blazon 'A', letter of the alphabet 'A' will exist assigned to your glyph. The text field located at the bottom left of each glyph shows the Unicode point assigned to the glyph, in hexadecimal.

Pro Tip: Y'all tin modify all number input fields in IcoMoon using arrow keys, or past scrolling. Hold the Shift cardinal while doing and so to change the number with bigger steps.

Before downloading your font, you can modify the name of the font via the Preferences panel. This panel may too be used for more advanced settings and to change your font'southward baseline or em size, use the Preferences panel.

Note: Using Latin letters is not recommended for icon fonts. Using the Private Use Area of Unicode is the best selection for icon fonts. By using PUA characters, your icon font will be compatible with screen readers. Simply if you use Latin characters, the screen reader might read unmarried, meaningless letters, which would exist confusing.

Ligatures

To enable/disable ligatures, press the fi button in the font tab of the app. Past enabling ligatures, you will exist able to assign words/tags to each glyph. You tin employ comma to assign multiple words to each glyph. By assigning a word to an icon, you can blazon that discussion and the icon would appear:
Interactie Demo at Linearicons.com

If the platform in which you use your font supports ligatures, typing the words you lot assign to each glyph would bring upwards that glyph. Ligatures are not supported in IE 9 and older, only the IcoMoon app provides a javascript polyfill for yous. IE 10 and other mod browsers support ligatures.

Note: To proceed the size of your fonts down, IcoMoon assigns empty glyphs to the single letters that y'all use in making your ligatures. For instance, if you assign the word abode to an icon, letters h, o, m and e would exist assigned to empty glyphs. To assign these letters to actual glyphs rather than empty ones, you tin use the two alphanumeric sets available in the library tab. You demand to exist a premium member in social club to access these glyph sets.

Also note that having empty glyphs for your alphabetic letters is perfectly okay when using the font in web. In case your font fails to load, the browser would fallback to using a different font and therefore the words you assigned to your icons would become readable, which is a good fallback.

Font Metrics

Yous can set up the baseline and the em size (size of the em square) of your font using the IcoMoon app. The height of the baseline is determined equally a per centum of the em size.

The IcoMoon app aligns the acme of the icon canvass to the ascender line and its lesser to the descender line of the font. Using this technique, the size of your font volition directly translate to the size of the icon. For example, if you lot fix your font-size in CSS to be 16px, you will get a 16px icon. This method was get-go introduced past IcoMoon.

Using this alignment technique, the lesser of the icon volition be placed most the baseline of any text before/after the icon. This is usually the expected behavior just you tin can always change the baseline of your font via the preferences panel in the Font tab.

Pro Tip: By changing the baseline, you lot can change how your icons align vertically.

Pro Tip: The Whitespace Width selection determines the width of the whitespace character (0x20) every bit a percentage of the elevation of the em square. Using a larger number would make the space character accept up more infinite horizontally.

Generating Icons in SVG & More

In add-on to icon fonts, the IcoMoon app allows you to download your called icons equally SVGs, which tin be used every bit inline SVGs in HTML.

If you prefer to download your icons in other formats, use the preferences panel in the Generate SVG & More tab. Supported formats include:

• Polymer: icon ready in the iron-iconset-svg format.
• PDF: Can exist used for iOS or Bone X app evolution.
  In addition to PDFs, y'all can apply Icomoon.swift to convert IcoMoon's icon fonts to type safe enums for each icon.
• XAML: Useful in developing Windows & Windows Phone apps.
• CSH: Photoshop Custom Shapes. Handy for usage in Adobe Photoshop.

Saving & Loading

When using IcoMoon, your modifications will automatically get saved in your browser'south enshroud (using IndexedDB). Furthermore, every generated font pack contains a selection.json file which you lot can import to the app. You may import this file both via the Import Icons button in the app, or via the project manager (accessed from Chief Menu → Manage Projects). If you import your selection.json file via the project manager, your project settings volition go imported too.

The project manager also allows you to save project files locally.

If yous are a premium user, your changes volition automatically become uploaded and synced to your user account on IcoMoon's servers.

Note: By default, your data gets saved in your browser's cache. Information technology does non go uploaded to your user account on IcoMoon's servers. If y'all articulate your browser's cache, this data will be lost.

Using Inline SVGs

When you download your icon pack from the SVG tab in the IcoMoon app, it comes with a demo.html file that contains SVG icon definitions on top of the document, below <body> and inside SVG's <defs> element. These icons can be referenced and used equally inline SVGs similar then:

            <svg course="icon-home">   <use xlink:href="#icon-home"></use> </svg>          

View example on CodePen

In the case above, we are embedding symbol definitions in the HTML itself. This works fine in all mod browsers besides as IE 9+.

It is also possible to link to an external SVG containing the definitions:

            <svg class="icon-abode">   <use xlink:href="symbol-defs.svg#icon-home"></use> </svg>          

Referencing an external SVG has the advantage that your icons go cached, with i HTTP request. But the external SVG and the HTML should exist served from the same domain. This approach works fine in modern browsers except for IE 9+. In order to support IE 9+, IcoMoon uses svgxuse. This polyfill detects if the icons are loaded properly; if they aren't, it sends one HTTP asking to fetch and cache symbol definitions.

Using Generated Fonts

The zip bundle that IcoMoon generates contains everything you need to become started using your icon font. Your font is provided in four different formats. Sample HTML and CSS files are included in the package too.

Getting Crisp Results

Icon fonts have a bad reputation of looking blurred. But as you tin can run into in the UI of this website (icomoon.io), it is possible to get completely precipitous and crisp results.

To become crisp results, the IcoMoon app should know the filigree size of the icons you're choosing. You don't need to worry about filigree sizes when using icons from IcoMoon's library. But if you lot are importing your own SVGs, you need to specify the filigree size. If you don't specify it, IcoMoon would presume your preview size to be the grid size. For instance, if you are viewing your icons at 32px, IcoMoon would assume the filigree size to be 32×32. Only you tin can also manually specify the grid size via the edit panel. To bring upwards the edit panel, click on the pencil push button and and then click on an icon. Y'all can too utilise the menu on meridian correct of each icon set to reset all grid sizes in that fix.

Annotation: Don't modify the grid size of the icons imported from IcoMoon's library. They already have the right grid size set for them.

When in the font tab of the IcoMoon app, your icons will be grouped by their filigree sizes. To get the best results, you lot should use this size when using your font. For example, if an icon set is optimized for (16 × N)px sizes, you will become crisp results by setting your font-size to 16px, 32px, 48px (= iii × 16px), etc. Too notation that by using -webkit-font-smoothing: antialiased; in your CSS, you lot can get better results.

The OS X version of Firefox doesn't render fonts according to how they were designed unless you lot utilise -moz-osx-font-smoothing: grayscale;. (supported in Firefox 25+.)

Note: Setting a filigree size in the IcoMoon app does not change anything most the icons themselves. The grid size of an icon is inherent to how it was designed. For example, setting a grid size of xiv in the Edit panel, for an icon that was designed on a 16px grid, does not make it pixel perfect at 14px or its multiples. Since IcoMoon itself has no way of knowing the grid size (if any) that was used in designing a custom icon, it lets you specify the grid size. IcoMoon uses this size for snapping the baseline of its output font with the grid. If the grid size that you lot take set up is right, snapping the baseline of the font to the grid would make the terminal consequence pixel perfect.

Accessibility and Screen Readers

For the best fallback in case your font fails to load, use suitable emoji or Unicode grapheme codes for your icons. By doing so, even if your font fails to load, the system font would prove an appropriate glyph.

Pro Tip: If yous are using macOS, you can press Ctrl + Cmd + Space to easily browse and insert emojis in whatever textfield.

If you but need a few icons, you might want to consider embedding your font in CSS. The IcoMoon app has an selection for doing this in the Preferences panel. When you embed the font in CSS, it can no longer neglect to load. Equally long as the CSS loads, your font will load likewise. The drawback is that if your font is large, it can make the CSS big and hence deadening down the initial loading of the page; then once again inline SVGs have the same consequence.

Due to bad implementation or bugs in some browser extensions, there are some concerns that icon fonts are non accessible to people with dyslexia. IcoMoon uses a simple CSS solution to address this.

Some screen readers (such every bit Apple's VoiceOver), read the content inside pseudo elements. You lot can hide an element from screen readers using the aria-hidden="true" attribute.

You can make screen readers read any text yous wish. This is normally useful when you want to use an icon without whatsoever visual text near it. Here's an example:

<a href="#">
<span grade="icon-home" aria-hidden="truthful"></span>
<span class="visuallyhidden">Dwelling </span>
</a>

The visuallyhidden form in this example is taken from H5BP:

            .visuallyhidden {     border: 0;     prune: rect(0 0 0 0);     peak: 1px;     margin: -1px;     overflow: hidden;     padding: 0;     position: absolute;     width: 1px; }          

Supporting IE 7 and IE 6

Erstwhile versions of Internet Explorer (IE 7 and older), don't support pseudo elements. If you need to back up these browsers, the IcoMoon app tin can assist you past generating both a javascript polyfill and a special CSS file (that uses CSS expressions, aka dynamic properties). Y'all can apply either of these files. To enable generating these files, use the preferences panel earlier downloading your font pack.

Serving Fonts from a Different Domain

Cross domain font requests fail in some browsers. Therefore, if served from a unlike domain, your web fonts demand to accept the advisable "Access-Control-Permit-Origin" response header. You tin use the following two configs to properly gear up headers:

            # For Apache <FilesMatch ".(eot|ttf|otf|woff)">   Header set Access-Control-Allow-Origin "*" </FilesMatch>  # For nginx location ~* \.(eot|ttf|woff)$ {   add_header Admission-Control-Permit-Origin '*'; }                      

To learn more virtually enabling cross-origin resource sharing, encounter enable-cors.org.

If you lot are using IcoMoon'southward Unlimited plan, information technology lets y'all upload your fonts for hosting and you lot won't need to worry about response headers or enabling CORS. To upload your icons for hosting, press the Enable Quick Usage button in the font or SVG tabs in the IcoMoon app.

Installing and Using Fonts Locally

To utilize the generated font in desktop applications, you can install the TTF font on your arrangement. When installing the TTF font or viewing it, the operating organisation may non show all the glyphs in your font, but that doesn't mean that the glyphs aren't included in the font. In most cases but the basic Latin characters are shown.

If you are using macOS (or OS X), yous can use Font Volume to see all the glyphs included in the font by pressing cmd + 2 or choosing the second option on height left of Font Book.

After installing the TTF font, open the demo.html (included in the cypher pack you lot downloaded) to run across a list of the glyphs in your font. The text box located to the bottom right of each glyph contains a grapheme (which may be invisible). You can copy and use this character in any desktop application that allows entering text and choosing a custom font to display it.

Note: When using type tools in a desktop applications, do not enter characters that don't exist in your font. If you lot do and so, the desktop awarding may switch your selected font to a dissimilar font. You should only be copy/pasting the characters that exist in your font.
The following gif demonstrates different methods of copying characters assigned to your glyphs.

Pro Tip: In recent versions of Adobe Illustrator or Adobe Photoshop, you can use the Glyphs window to view and pick the characters in your fonts.

To make information technology easier to use your font locally, consider adding ligatures to your glyphs before downloading the font.

Note: In some operating systems, reinstalling an updated version of a font that y'all previously installed may non work every bit expected. You may demand to change the version of the font to make sure the operating system would be using the most recently installed font. To set a version for your font, refer to the Preferences panel of the Font tab. Renaming the font (via the preferences panel) is another way to remedy this problem. You lot may besides demand to reopen the application in which you lot're using the font.

Questions/Support

You might find your question in the FAQ page. Experience free to go in touch if you have whatsoever suggestions or questions.

Legal

• Terms of Apply
• Privacy Policy

penacommaking.blogspot.com

Source: https://icomoon.io/docs.html

Share this post