Elegant icons font css

Иконки в формате шрифта для сайта

В этой статье мы рассмотрим, что такое иконки в формате шрифта, и какие они имеют преимущества и недостатки. Кроме этого, разберём основные принципы работы с иконками в формате шрифта и некоторые варианты их использования.

Что такое иконки в формате шрифта

Иконки в формате шрифта представляет собой просто шрифт. Но в отличие от обычных шрифтов они содержат не буквы и цифры, а значки (иконки).

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

• Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
• Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
• Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
• Более быстрая загрузка иконок, т.к. они имеют небольшой размер;
• Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
• Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

Значки в формате шрифта обычно находят широкое применение при разработке дизайна сайта, т.е. используются для оформления различных его элементов или блоков.

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

• их затруднительно использовать для иконок, которые являются сложными изображениями, а не просто значками;
• цвет иконки в формате шрифта ограничен одним цветом.

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.
2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию @font-face , которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

Источник

The Elegant Icon Font Just Got Better, With 50 New Business Icons

In August we released the Elegant Icon Font, with 310 beautiful icons packaged conveniently into a single font file. This icon font gives us a way to display beautiful vector-based graphics in our designs, but they can also be used for many other purposes, which is why we made them available for download for free! We also licensed them under the GPL 2.0, which means they are completely Open Source and restriction-free. Today, we add 50 more to that set with a business-themed update. These are pixel perfect at font sizes that are multiples of 16px, but can be used at any desired size. Download the full 360 icon set here.

How To Use The Font On Your Website

There were a lot of questions regarding how to embed a font into a website. We have created a short tutorial below that should clarify things a bit.

The first thing you need to do is embed the font using CSS. You can do this by editing your website’s CSS file, or if you are using an Elegant Theme, then you can paste the relevant CSS into the “Custom CSS” panel in ePanel. Inside your WordPress Dashboard, locate your theme option’s menu under the Appearances tab, and then look for the “Custom CSS” box. Paste the code below into the box and click save. If you are not using an Elegant Theme, then you can use the Appearances > Editor to add the code to your theme’s style.css file, or you can create a Child Theme. Note: When editing your theme, it’s a great a idea to create a child theme instead of editing the theme’s original file, otherwise you will need to perform the changes again whenever you update your theme.

@font-face < font-family: ‘ElegantIcons’;
src:url(‘/fonts/ElegantIcons.eot’);
src:url(‘/fonts/ElegantIcons.eot?#iefix’) format(’embedded-opentype’),
url(‘/fonts/ElegantIcons.woff’) format(‘woff’),
url(‘/fonts/ElegantIcons.ttf’) format(‘truetype’),
url(‘/fonts/ElegantIcons.svg#ElegantIcons’) format(‘svg’);
font-weight: normal;
font-style: normal; >

[data-icon]:before < font-family: ‘ElegantIcons’;
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; >

You will also find a folder called ‘fonts‘ in the icon package. Move this folder to your website’s base directory, such that it would be located at www.yourwebsite.com/fonts. You can use FTP to upload the folder to your website.

After you have done this, you can give any html element the data-icon attribute with a value of the icon you would like to use. The full list of Icons and their unicode values are listed on the icon font download page. For example, if I wanted to use the “Up Arrow” icon, I could create a span with the data-icon value of “!” and then adjust the size and color of the object accordingly.

And that’s it! If all goes accordingly, you will have successfully embedded ElegantIcons into your website.

For a a few more ways of implementation and a more detailed description of how to embed this font, Chris Ferdinandi has some great documentation on the subject.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Flomeni/elegant-icons

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Composer/Component Package to provide the famous elegant icon font library containin 360 icons with less support. Created by: http://www.elegantthemes.com/blog/resources/elegant-icon-font

By default, only the woff and woff2 formats (Why?) of the fonts will be pulled from a CDN (using RawGit). If you want to use different formats and/or local fonts, check the Customization section below.

To use the icons, you will need their names, which you can find here (right after the unicode reference list).

The unicode references of the above list are meant to be used as data-icon , which the support has been removed in this sass version, because it‘s considered a bad practice due to performance issues. If you wish to use this way, you must define it yourself.

On the list, you will find that almost all icons have an icon_ prefix in their names, which seems to be redundant and unnecessary. In this Sass version, you can omit it (as done in the exemples below), but for backwards compatibility they are still valid selectors for all usage types (mixin, placeholder or class).

By default, the icon will be defined as a ::before pseude-element. If you wish to change this default, check the Customization section below.

Include the mixin in your selector:

.my-selector < @include elegant-icon('arrow_up'); >

You can override the icon’s default placement by passing it as a second parameter:

.my-selector < @include elegant-icon('question', 'after'); >

Extend the your selector with the placeholder:

.my-selector < @extend %ei-contacts_alt; >

When using as a placeholder, the prefix ei- must be used. Check the Customization section below on how to change or remove this prefix.

If you just want to use it as a class, you MUST ACTIVATE the class generation first (Check the Customization section below on how to activate it.)

After activated, you can simply set the icon class name to your html element:

When using as a class, the prefix ei- must be used. Check the Customization section below on how to change or remove this prefix.

This sass version of the Elegant Icons defines a few defaults, which are considered best practices or common use cases. If you wish to override them, here is how:

The overrides below, must be done BEFORE the import explained in the Step 2 of the Usage section.

$ei-generate-classes: true; // Default value: false

Using a different selector prefix:

$ei-icon-prefix: 'my-prefix-'; // Default value: 'ei-'

If you don‘t want to use a prefix, set it to an empty string: $ei-icon-prefix: »;

Set the icons placement as ::after :

$ei-default-placement: 'after'; // Default value: 'before'

The $ei-default-placement variable can only be set as ‘before’ or ‘after’ which will define it as a ::before or an ::after pseudo-element, respectively.

Using different font formats:

// All formats: $ei-font-formats: eot woff2 woff ttf svg; // Default value: woff woff2

You can define any formats combination that you need from the available formats on example list above.

// Example: $ei-font-path: '../assets/fonts/elegant-icons/'; // Default value: '/fonts'

Please note that the path above must be relative to the generated CSS file, since it is used as a normal src: url() in an @font-face definition.

$ei-font-filename: 'my-custom-icons-filename'; // Default value: 'ElegantIcons'

If you‘re just copying the font files and not renaming them, don‘t override this.

$ei-font-family: 'My-Custom-Icons-Family-Name'; // Default value: 'ElegantIcons'

Override only if you somehow wish to have a different font-family name defined to the icons font.

You might need to copy the font files yourself from the node_modules/elegant-icons-sass/fonts folder. You can use your build system of choice for that.

The original image files (in SVG and PNG) can be found in the repo’s image folder.

Источник