比特派钱包下载中文版安卓|icomoon

❍ IcoMoon

❍ IcoMoon

Log In

Log In

Docs

News

Pricing

IcoMoon App

New App

soon

IcoMoon

Pixel Perfect Icon Solutions

IcoMoon App

Import your own SVGs

Thousands of free vector icons

Select the icons you need

Generate fonts, sprites, etc.

Icon Packs

Handcrafted on pixel grids

Money back guarantee

Customizable vector formats

Perpetual license & free updates

Premium Plans

Unlimited projects

Auto-saving of projects

Generate permanent links

Publish icons to CDN

_vect_ on

About

FAQ

Contact

© 2024 IcoMoon.io

� IcoMoon App - Icon Font, SVG, PDF & PNG Generator

� IcoMoon App - Icon Font, SVG, PDF & PNG Generator

Dismiss

Loading…

Ultimate Pack ❍ IcoMoon

Ultimate Pack ❍ IcoMoon

Log In

Ultimate Pack

Log In

Docs

News

Pricing

IcoMoon App

New App

soon

Ultimate

Buy Now for $59

If you are looking for small icons suitable for user interface design,

this icon pack could help get the job done.

Before making your purchase, you may optionally register for an IcoMoon.io account. By doing so, your icon pack will automatically get attached to your account and you will be able to access the icons via IcoMoon's Library.

1500 Vector Icons

Free icon pack updates

Vector Formats: SVG, Ai, PSD, PDF

Photoshop Shapes (CSH)

PNGs in 16px, 32px, 48px and 64px

Icon Font & SVG sprites via IcoMoon app

Desktop font with ligatures

14 Day Refund Policy

Friendly License

Ligature Font

Type "pencil" to get a pencil icon. This pack comes with an installable

font equipped with thousands of ligatures. This font can be installed and

used in Adobe Photoshop, Sketch, Adobe Illustrator, Word, etc. to easily

insert icons into your projects.

Free Version Available

A subset of the Ultinmate pack containing 490 icons is available for free. Choose either the GPL or the CC BY 4.0 license, whichever is more suitable for your project. For attribution, you can link to icomoon.io.

Handcrafted on a 16px Grid

The Ultiamte pack was designed on a small, 16px grid.All the lines and curves were carefully placed within the boundaries of this grid, resulting in crisp and pixel perfect icons at 16px and its multiples: 32px, 48px, etc.

32px Preview

⚠

Enable JavaScript to toggle between 16px and 32px previews.

32px

Preview

License

Use the Ultimate pack in both commercial and non-commercial projects

Modify the icons as you wish

14 day refund policy

10 designers/developers per license

You don’t need an extra license for new projects

No additional fees for future updates

⚠

Enable JavaScript to view the full license agreement.

View License Agreement

_vect_ on

About

FAQ

Contact

© 2024 IcoMoon.io

Icon Fonts ❍ IcoMoon

Icon Fonts ❍ IcoMoon

Log In

Icon Fonts

Log In

Docs

News

Pricing

IcoMoon App

New App

soon

What is an Icon Font?

We refer to any font that has icons or symbols for its glyphs as an

"icon font". These fonts can be used on the web, as well as any other

environment that supports using custom fonts.

The IcoMoon app lets you generate your

own fonts from your own SVGs.

Best Way to Use Icon Fonts

We recommend using icon fonts as a progressive enhancement, for icons with

corresponding Unicode characters. This way, even if there is a problem with

loading of the font, the system font will still show the characters.

In other words, it's best to use icon fonts as "emoji" fonts,

for customizing default emojis.

This website itself uses an icon font in this way. As an example, see the

pricing page. The lock, checkmark, and info

icons in that page are actually emojis with a custom font.

✓

ℹ

⚠

Try copying the line above. Assistive technologies like screen readers would

handle these icons properly as well.

_vect_ on

About

FAQ

Contact

© 2024 IcoMoon.io

About ❍ IcoMoon

About ❍ IcoMoon

Log In

About

Log In

Docs

News

Pricing

IcoMoon App

New App

soon

About

IcoMoon has been generating icon packs since its release in November of 2011.

It was the first tool that allowed generating custom icon fonts.

Today, IcoMoon's capabilities have expanded far beyond icon fonts.

We are striving to build and provide the best iconography and icon

management tool for perfectionists. IcoMoon's

icon library features

some of the best icon sets out there. All these icons are handcrafted and

pixel fitted. The IcoMoon app lets you build and use your own icon packs

in many different formats including SVG, Polymer, PDF, XAML, CSH,

icon font with

ligatures, or good old PNG/CSS sprites.

We have been working on a completely new version of the IcoMoon app for the

past couple of years. You can get notified of its release by

signing up and setting the newsletter option.

_vect_ on

About

FAQ

Contact

© 2024 IcoMoon.io

Docs ❍ IcoMoon

Docs ❍ IcoMoon

Log In

Docs

Log In

Docs

News

Pricing

IcoMoon App

New App

soon

Contents

What is IcoMoon?

Icon Packs

IcoMoon App

Selecting Icons

Editing Icons

Importing your own vectors

Converting Strokes to Fills

Making a Font

Ligatures

Font Metrics

Generating Icons in SVG & More

Saving & Loading

Using Inline SVGs

with external reference

Using Generated Fonts

Getting Crisp Results

Accessibility and Screen Readers

Supporting IE 7 and IE 6

Serving from a Different Domain

Installing and Using Fonts Locally

Questions/Support

Legal

What is IcoMoon?

IcoMoon is an icon solution, providing three main services: vector icon

packs, the IcoMoon App, and hosting icons as SVGs or fonts.

Icon Packs

IcoMoon provides many free icon packs. You can find them in the

library tab

of the IcoMoon app. Each of them have a license link that you can refer

to. Aside from these free icon packs, IcoMoon also provides

three premium icon packs

which can only be purchased separately.

IcoMoon App

Head over to https://icomoon.io/app

using a modern web browser to start using the IcoMoon app. This HTML5

application allows you to quickly 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 as its glyphs) or generate icons in SVG, Polymer, PDF,

XAML, PNG and CSS sprites.

Selecting Icons

You can simply click on an icon cell to select or deselect it. You may

also drag to select a group of icons. If you click on an icon cell to

select it, and then hold down the Shift key when

selecting another icon, all the icons in between these two icons will be

selected.

Editing Icons

To edit an icon, use the edit/pencil button and then click on an icon

cell. This will bring up the edit panel. The edit panel allows you to

perform some simple modifications (such as rotating or mirroring),

edit tags, change the grid size given to your icons, etc.

Pro Tip: Instead of pressing the pencil button, you

could hold down the option/alt key and then click an icon cell to

bring up the edit panel.

If you need to adjust how your icons align with text, you can use the

edit panel and use the Move Up and

Move Down buttons.

Importing your own vectors

You 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 get imported properly, consider the following

guidelines:

Strokes get ignored when generating fonts or CSH files.You can convert/expand 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 be done using the Pathfinder window. In general, avoid overlapping shapes with the same color.

Adding a bitmap image (PNG, JPEG, etc.) to an SVG image does not make it vector. Bitmap images embedded in SVGs get ignored.

If you still had problems importing your SVGs,

contact us.

We'll try to help as soon as possible.

Pro Tip: You can use drag and drop to import your SVG

files. In order to import your SVGs to the same set, you can either

use the menu on top right of each set and choose the Import to

Set option, or drag your SVGs and drop them on top of the set you

want to import them to.

Pro Tip: If you import an SVG with a filename like

home#house#building-U0xE999, it gets imported with three tags

(home, house, building) and will have 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 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 can apply Object → Expand.

Inkscape

Select the shapes that you want to convert and then choose 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 see 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, simply modify the text field located at the bottom right of each glyph. For example, if you type 'A', letter 'A' will be 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: You can modify all number input fields in IcoMoon using arrow keys, or by scrolling. Hold the Shift key while doing so to change the number with bigger steps.

Before downloading your font, you can change the name of the font via the Preferences panel. This panel may also be used for more advanced settings and to change your font's 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 option for icon fonts. By using PUA characters, your icon font will be compatible with screen readers. But if you use Latin characters, the screen reader might read single, meaningless letters, which would be confusing.

Ligatures

To enable/disable ligatures, press the fi button in

the font tab of the app. By enabling ligatures, you will be able to

assign words/tags to each glyph. You can use comma to assign multiple

words to each glyph. By assigning a word to an icon, you can type that

word and the icon would appear:

Interactive Demo at Linearicons.com

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

Note: To keep the size of your fonts down, IcoMoon

assigns empty glyphs to the single letters that you use in making your

ligatures. For example, if you assign the word home

to an icon, letters h, o,

m and e would be assigned to empty

glyphs. To assign these letters to actual glyphs rather than empty

ones, you can use the two alphanumeric sets available in the

library tab. You

need to be a paid plan in order 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

You can set 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 as a percentage of the em size.

The IcoMoon app aligns the top of the icon canvas to the ascender line

and its bottom to the descender line of the font. Using this

technique, the size of your font will directly translate to the size

of the icon. For example, if you set your font-size in CSS to be 16px,

you will get a 16px icon. This method was first introduced by IcoMoon.

Using this alignment technique, the bottom of the icon will be placed

near the baseline of any text before/after the icon. This is normally

the expected behavior but you can always change the baseline of your

font via the preferences panel in the Font tab.

Pro Tip: By changing the baseline, you can change how

your icons align vertically.

Pro Tip: The Whitespace Width option determines the

width of the whitespace character (0x20) as a percentage of the height

of the em square. Using a larger number would make the space character

take up more space horizontally.

Generating Icons in SVG & More

In addition to icon fonts, the IcoMoon app allows you to download your

chosen icons as SVGs, which can be used as 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 set in the iron-iconset-svg format.

PDF: Can be used for iOS or OS X app development.

In addition to PDFs, you can use 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's cache (using IndexedDB). Furthermore, every generated

font pack contains a selection.json file

which you 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 Main Menu → Manage Projects). If you

import your selection.json file via the project manager, your project

settings will get imported too.

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

If you are using a paid plan, your

changes will automatically get uploaded and synced to your account on

IcoMoon's servers.

Note: By default, your data gets saved in your

browser's cache. It does not get uploaded to your user account on

IcoMoon's servers. If you clear 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 and inside SVG's element. These icons can be referenced and used as inline SVGs like so:

View example on CodePen

In the example above, we are embedding symbol definitions in the HTML itself. This works fine in all modern browsers as well as IE 9+.

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

Referencing an external SVG has the advantage that your icons get cached, with one HTTP request. But the external SVG and the HTML should be 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 request to fetch and cache symbol definitions.

Using Generated Fonts

The zip package that IcoMoon generates contains everything you need to

get 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 can

see here and

here, it is possible to get

completely sharp and crisp results.

To get crisp results, the IcoMoon app should know the

grid size of the icons you're choosing. You don't need to

worry about grid sizes when using icons from

IcoMoon's library.

But if you are importing your own SVGs, you need to specify the grid

size. If you don't specify it, IcoMoon would assume your preview size

to be the grid size. For example, if you are viewing your icons at

32px, IcoMoon would assume the grid size to be 32×32. But you

can also manually specify the grid size via the edit panel. To bring

up the edit panel, click on the pencil button and then click on an

icon. You can also use the menu on top right of each icon set to reset

all grid sizes in that set.

Note: Don't change the grid size of the icons

imported from IcoMoon's library. They already have the correct grid

size set for them.

When in the font tab of the IcoMoon app, your icons will be grouped by

their grid sizes. To get the best results, you should use this size

when using your font. For example, if an icon set is optimized for (16

× N)px sizes, you will get crisp results by setting your

font-size to 16px, 32px, 48px (= 3 × 16px), etc. Also note that

by using -webkit-font-smoothing:

antialiased; in your CSS, you can get better results.

The macOS version of Firefox doesn't render fonts according to how

they were designed unless you use

-moz-osx-font-smoothing: grayscale;.

(supported in Firefox 25+.)

Note: Setting a grid size in the IcoMoon app does not

change anything about the icons themselves. The grid size of an icon

is inherent to how it was designed. For example, setting a grid size

of 14 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 have set is correct, snapping the

baseline of the font to the grid would make the final result pixel

perfect.

Accessibility and Screen Readers

For the best fallback in case your font fails to load, use suitable

emoji or Unicode character codes for your icons. By doing so, even if

your font fails to load, the system font would show an appropriate

glyph. For example, you can use for a date picker icon or ⭐️ for a

favorite/like button.

Pro Tip: If you are using macOS, you can press

Ctrl + Cmd + Space to easily browse and insert

emojis in any text field.

If you only need a few icons, you might want to consider embedding

your font in CSS. The IcoMoon app has an option for doing this in the

Preferences panel. When you embed the font in CSS, it can no longer

fail to load. As long as the CSS loads, your font will load too. The

drawback is that if your font is large, it can make the CSS large and

hence slow down the initial loading of the page; then again

inline SVGs have the same issue.

Due to bad implementation or bugs in some browser extensions, there

are some concerns that icon fonts are not accessible to people with

dyslexia. IcoMoon uses a simple CSS solution

to address this.

Some screen readers (such as Apple's VoiceOver), read the content

inside pseudo elements. You can hide an element from screen readers

using the aria-hidden="true"

attribute.

You can make screen readers read any text you wish. This is usually

useful when you want to use an icon without any visual text near it.

Here's an example:

Home

The visually-hidden class in

this example is taken from H5BP:

.visually-hidden {

border: 0;

clip: rect(0, 0, 0, 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

white-space: nowrap;

width: 1px;

}

Supporting IE 7 and IE 6

Old versions of Internet Explorer (IE 7 and older), don't support

pseudo elements. If you need to support these browsers, the IcoMoon

app can help you by generating both a javascript polyfill and a

special CSS file (that uses CSS expressions, aka dynamic properties).

You can use either of these files. To enable generating these files,

use the preferences panel before downloading your font pack.

Serving Fonts from a Different Domain

Cross domain font requests fail in some browsers. Therefore, if served

from a different domain, your web fonts need to have the appropriate

“Access-Control-Allow-Origin” response header. You can use the

following two configs to properly set headers:

# For Apache

Header set Access-Control-Allow-Origin "*"

# For nginx

location ~* \.(eot|ttf|woff|woff2)$ {

add_header Access-Control-Allow-Origin '*';

}

To learn more about enabling cross-origin resource sharing, see

enable-cors.org.

If you are using IcoMoon's

Unlimited plan, it lets you upload your

fonts for hosting and you 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 use the generated font in desktop applications, you can install the

TTF font on your system. When installing the TTF font or viewing it,

the operating system may not show all the glyphs in your font, but

that doesn't mean that the glyphs aren't included in the font. In most

cases only the basic Latin characters are shown.

If you are using macOS, you can use

Font Book

to see all the glyphs included in the font by pressing

cmd + 2 or choosing the second option on top left of

Font Book.

After installing the TTF font, open the demo.html

(included in the zip pack you downloaded) to see a list of the glyphs

in your font. The text box located to the bottom right of each glyph

contains a character (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 do so, the desktop application may switch your selected font to

a different 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 it 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 you previously installed may not work

as expected. You may need 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 may also need to reopen the

application in which you're using the font.

Questions/Support

You might find your question in the FAQ page.

Feel free to get in touch if you have any

suggestions or questions.

Legal

⚠

Enable JavaScript to view terms of use and privacy policy.

Terms of Use

Privacy Policy

Close

_vect_ on

About

FAQ

Contact

© 2024 IcoMoon.io

App Features ❍ IcoMoon

App Features ❍ IcoMoon

Log In

App Features

Log In

Docs

News

Pricing

IcoMoon App

New App

soon

IcoMoon App

icomoon.app

Custom Fonts & Ligatures

Choose only the icons you need to make optimized

icon fonts.

You can even assign multiple

ligatures

to your glyphs. Generated fonts can be used on the web or installed on

your system.

✅

Icon Fonts Done Right

Unlike other icon font services, the icon fonts that are generated using

the IcoMoon app look crisp, and the font-size you specify will directly

translate to the size of the icon.

5500+ Free Icons

IcoMoon's library features

many high quality icon sets. All of these icons are designed on a grid

and they are optimized to be used with the IcoMoon app.

With Privacy In Mind

Almost everything you do inside the IcoMoon app happens locally. For

example, when you import an SVG image/font or generate a font,

everything happens in your browser and your SVG won't get uploaded to

our servers, unless you choose to use our hosting or paid services for

auto-saving of projects in your account.

Inline SVGs & More

Using the SVG & More tab in the IcoMoon app, you

can export your icons in SVG, Polymer, PDF, XAML, CSH, PNG and more.

IcoMoon generates inline SVGs that can be used with the

tag.

➕

Import Your Own Vectors

Using this app you can import your own vectors (SVG). Importing happens

locally, inside your own browser. Some basic editing options such as

moving, mirroring and rotating are available too.

It's Free!

The IcoMoon app is free to use. Code files (HTML, CSS, JS) generated by

IcoMoon are MIT licensed. The license for each icon pack is listed in

the library tab of the

app.

Works Offline!

Once loaded, the IcoMoon app works offline. You could load the

Generate Font/SVG pages and then turn off your internet

connection to import your icons and generate icon packs.

_vect_ on

About

FAQ

Contact

© 2024 IcoMoon.io

How to use IcoMoon and Icon Fonts - Part 1: Basic Usage: Chip Cullen

How to use IcoMoon and Icon Fonts - Part 1: Basic Usage: Chip Cullen

Chip Cullen

How to use IcoMoon and Icon Fonts - Part 1: Basic Usage

July 31, 2013

Note: This post was updated on December 18th, 2013, to use new screenshots that show the recent redesign to the IcoMoon App.

I've become a huge fan of using icon fonts recently. I love the fact that graphics elements that are implemented this way are vector based & stylable with CSS. It makes them really easy and flexible to work with.

One of the things that you will have to confront, though, is how to actually get an icon font that you can use. That is where IcoMoon comes in. It is an online service that lets you generate a custom-built icon font, using icons that are either open licensed or for-pay.

I've used IcoMoon on a couple of projects lately, and wanted to share what I've learned. I'm going to break this into three seperate posts:

How to use IcoMoon at a basic level

How I've used it in a workflow

Share some ninja-level tricks to really get the most out of it

Audience

These articles are intended for front end developers, or anyone who is in the business of actually creating working HTML & CSS for websites.

Assumptions

I'm going to assume that you know how to write HTML and CSS to a fairly high degree. The concept of attribute selectors is not foreign to you.

What I won't cover

I'm not going to cover how to create a font from scratch - there are libraries full of books on just that subject. This also isn't a primer on drawing icons themselves.

To the moon, Alice: Launching IcoMoon

The IcoMoon site actually has a few facets to it - you can download packs of vectors files to use in design work. To use the font generator, you need to click on the "App" link, then the "Launch App" button.

Now - the fun part - picking out icons! Take a look at the default set of IcoMoon icons and see if anything strikes your fancy. In my case, I want to use this rocket ship:

Go nuts! Pick out as many icons as you want to use, or have use for. My icon fonts tend to end up in the 20-30 icon range.

Be sure to read the third part of this series for some ninja level stuff you can do at this stage

Generating the font

When you've added all the icons that you want, you need to click on the font button at the bottom of the screen to get ready to generate a font:

This takes you to the "Font" screen, which shows you every icon that you've selected, as well as the unicode character for it (more on that in a bit).

Now click "Download" and IcoMoon will kick out a zip file, with your custom icon font(s) in it.

What you get

IcoMoon gives you a few things when it generates your font -

A "fonts" directory that actually contains the generated font files

demo.html is a useful HTML file that you will want to keep a hold of for reference

A demo-files directory - this is just extra stuff needed by demo.html - you don't really need to worry about it

style.css - used by demo.html, as well as the CSS you will need to incorporate into your project in order to use your icon fonts.

Read Me.txt - just what it says

NEW as of Fall 2013 - selection.json - A file that contains your choices and configurations, which can be uploaded to IcoMoon if you need to revise your font later. (Author's note: I'm very happy that this comes by default now)

The way I generally roll is to have a directory in my project, on the same level as /css/, called 'fonts', and I drop this whole IcoMoon folder into it. Then I copy the four font files that I need and put those copies into the top level of /fonts/.

Why copy? You will see in part 2.

Using your icons

In order to actually use the icons in your icon font, you will have to 1) add your icon font via CSS and 2) insert your icons.

If you open the provided style.css from IcoMoon, you will see the @font-face rule that you will need:

@font-face {

font-family: "icomoon";

src: url("fonts/icomoon.eot");

src: url("fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon.woff")

format("woff"), url("fonts/icomoon.ttf") format("truetype"), url("fonts/icomoon.svg#icomoon")

format("svg");

font-weight: normal;

font-style: normal;

}

You will need to adjust the paths to the font files to suit the relationship between your CSS file and your font files. I almost always have to insert '../' into the font path in my projects:

src: url("../fonts/icomoon.eot");

To insert your icons, you can go about it two ways:

Inserting icons as elements in HTML

The majority of the time, you will be inserting new pieces of markup. The trick is to have a data attribute attached to your icon element. The convention suggested by IcoMoon is to use a with a 'data-icon' attribute:

You could just as easily use an element as has been suggested elsewhere. The key is the data-icon attribute, and it's contents.

That is because, if you look at the downloaded style.css, in order to have your icons show up, you need a piece of CSS that looks like this:

[data-icon]:before {

font-family: "icomoon";

content: attr(data-icon);

speak: none;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

}

What this does is target any element that has the data-icon attribute, and using the :before pseudo element, inserts whatever the contents of that attribute actually is. Just be sure to use the right HTML entity for the icon you want, which you can figure out by looking at the provided index.html.

Using pseudo elements

I've kind of covered this previously. If you find yourself in a situation where altering your markup is difficult (and you aren't worried about IE < 8), you can insert icons via :before or :after pseduo elements. The trick is to just 'escape' the HTML entity that references the icon you want:

.foo:before {

content: "\e001";

font-family: "icomoon";

speak: none;

}

You can then style this however you want - with font size, color, css transitions, etc.

So that is a basic run down of how to get started with IcoMoon. Be sure to catch the next part of this series where I will go over the workflow that I've found works (for me) when working with IcoMoon's icon fonts.

Tags:

icomoon

icons

tools

tutorial

Next: How to use IcoMoon and Icon Fonts – Part 2: A Workflow

Previous: Using icons from icon fonts directly in CSS

Hello! I’m Chip. Chip Cullen. I’m an engineering manager and front end developer currently working at PBS, currently living in the Washington D.C. area.

I believe in the power of the web to do good in this world.

This site uses Source Serif 4 for typesetting it’s headlines. Body text, such as this sentence, is set in whatever your device’s UI type is.

Sketches by me, in fountain pen and watercolor.

all tags and posts

about

rss

github

mastodon

linkedin

instagram

styleguide

© Chip Cullen 2010 - 2024

How To Use IcoMoon in your Desktop Application - YouTube