Css fonts for icons

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

The Icons

You asked, Font Awesome delivers with 41 shiny new icons in version 4.7. Want to request new icons? Here’s how. Need vectors or want to use on the desktop? Check the cheatsheet.

41 New Icons in 4.7

Web Application Icons

Accessibility Icons

Hand Icons

Transportation Icons

Gender Icons

File Type Icons

Spinner Icons

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Warning!

Apparently, Adblock Plus can remove Font Awesome brand icons with their «Remove Social Media Buttons» setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you’ll need to modify the social icon class names.

• All brand icons are trademarks of their respective owners.
• The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
• Brand icons should only be used to represent the company or product to which they refer.
• Please do not use brand logos for any purpose except to represent that particular brand or service.

Medical Icons

Font Awesome licensed under SIL OFL 1.1 ·
Code licensed under MIT License ·
Documentation licensed under CC BY 3.0

Font Awesome 5 Released!

More Icons

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them!

All-New SVG

Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle.

Tons More

Ligatures for easier desktop use, shim for quick upgrades from 4, and more styles, icons, and tools with FA Pro.

Источник

Customizing Icons

Font Awesome icons can be customized even further using your own CSS. We’ve even added CSS Custom Properties to our style toolkit options.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Before You Get Started

Customize with CSS Custom Properties

Our styling toolkit provides a lot of utility, including size, rotate, stack, and animate icons. Using the CSS custom properties

(opens new window) below, we’ve added easy ways to customize aspects of our styling toolkit’s features.

Using Custom Properties in a Project

(opens new window) are still a pretty new thing for most folks. Here are some ways you can define them within your project…

Setting Properties with CSS :root

You can define custom properties at CSS :root pseudo-class

(opens new window) level. This will make any icons that use a styling toolkit’s feature inherit the properties by default.

 style> :root  --fa-style-family: "Font Awesome 6 Pro"; --fa-style: 400; --fa-border-color: red; --fa-primary-color: green; --fa-secondary-color: red; > style> 

Setting Properties with Project-Based CSS Rules

You can also set custom properties inside of your project’s CSS, in the of a page or in a separate stylesheet. These properties will be scoped to just elements that match the selector of the rule you’ve included them in.

style> /* setting a decorative icon dropcap before a block of text */ .ye-olde-icon-dropcap  --fa-border-color: WhiteSmoke; --fa-border-padding: 2em; --fa-border-radius: 0.25em; --fa-pull-margin: 2em; font-size: 8em; > /* playing DJ with fa-record-vinyl */ .track-quick-spin  --fa-spin-duration: 0.25s; --fa-spin-iteration-count: 1; --fa-spin-timing: ease-out; > .track-vocals  --fa-spin-duration: 10s; --fa-spin-timing: ease-in-out; --fa-spin-iteration-count: 2; > .track-dope-hook  --fa-spin-duration: 10s; --fa-spin-iteration-count: 10; > /* Mo' Malfoy! Mo' Malfoy! Mo' Malfoy! */ .theme-slytherin  --fa-primary-color: darkgreen; --fa-secondary-color: silver; > /* extra sharp flavor */ .theme-sharp  font: var(--fa-font-sharp-solid); > style> 

Setting Properties with Inline Styles

Many of the examples in these docs define CSS custom properties using inline styling by adding a style attribute to an element. This is best for one-offs or very custom colored/styled duotone icons that you won’t need to change at a system level.

 i class="fa-solid fa-bomb fa-rotate-by" style="--fa-rotate-angle: 45deg;">i> i class="fa-duotone fa-crow" style="--fa-primary-color: dodgerblue; --fa-secondary-color: gold;" >i> 

Be careful of specificity and cascade!

CSS Custom properties that are redefined will trump each other. Defining a property in :root <> and then defining the same property in a rule or inline will result in the :root style being overridden.

Add Your Own Custom Styling with CSS

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

Everything you can typically control with CSS is up for grabs — from color to display to alignment. We recommend targeting icons in your CSS in a couple of different ways. You can also add your own custom styling to Font Awesome icons by adding your own CSS rules in your project’s code.

Here’s a quick example of using those selectors to add custom color to Font Awesome icons:

 head> link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet"> link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet"> link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet"> link href="/your-path-to-fontawesome/css/sharp-solid.css" rel="stylesheet"> head> 

 style> /* custom styling for all icons */ .fa-solid, .fa-brands, .fa-sharp-solid  background-color: papayawhip; border-radius: 0.2em; padding: 0.3em; > /* custom styling for specific icons */ .fa-fish  color: salmon; > .fa-frog  color: green; > .fa-user-ninja.vanished  opacity: 0.2; > .fa-facebook  color: rgb(59, 91, 152); > style> body> i class="fa-solid fa-fish">i> i class="fa-solid fa-frog">i> i class="fa-solid fa-user-ninja vanished">i> i class="fa-brands fa-facebook">i> i class="fa-sharp fa-solid fa-fish">i> body> 

Writing Custom CSS with our SVG + JS framework

When using our SVG framework, remember that Font Awesome-based DOM elements are replaced with new elements by default. Be sure that your CSS rules target the right elements.

Источник