Font awesome html css

Use Font Awesome on the Web

Get set up, add icons and style, or fine-tune – we’ve got what you need to know to use Font Awesome icons on the web.

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

Setting Up on the Web

There are a few different ways to set up Font Awesome. We suggest using a kit since it’s easy, fast, and customizable.

Use a Kit

Like a CDN just for you! Adjust the settings, get auto-subsetting, upload your own icons, and lots more goodies.

In a Hurry? Try Our Quick Start.

Create a kit, add some icons, sprinkle in some style, and you’re off and running!

Host Yourself

Take the wheel and drive how you want when you host yourself.

Upgrade from Earlier Versions of Font Awesome

Are you a Font Awesome OG using Version 5, or even 4? You can easily upgrade to Version 6.

Use Font Awesome npm Packages

Get all the awesome packed up to-go in our npm packages.

Add Font Awesome Icons to Your Project

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

You can add icons to your web projects with a little bit of code — it’s easy once you have a few of the basics under your belt.

Источник

Начало работы

CDN Font Awesome самый наипростейший способ начать использовать Font Awesome на вашем сайте или в приложении, и всего-лишь одной строкой кода. Не нужно ничего скачивать и устанавливать.

Мы создаем каждый набор иконок индивидуально под каждый сайт, что позволит вам изменить иконки быстро и без лишней мороки. Также по этому адресу почты мы можем идентифицировать какой набор иконок ваш, а это значит, что вы можете управлять своими наборами.

Иконки для сайта. Быстро.

Вам не придется тратить время на файлы на вашем сервере. Вы получите все 675 иконки плюс наборы стилей — все оптимизировано для быстрой загрузки.

Легкие обновления

Так как каждый сайт будет иметь уникальный набор иконок, то вы с легкостью можете его обновлять без каких-либо изменений в коде. Чудненько =).

Автоподдержка доступности

CDN Font Awesome поможет вам автоматизировать поддержку доступности ваших иконок для всех посетителей. Узнайте подробнее о лучших практиках доступности.

Асинхронная загрузка

Хотите ускорить загрузку вашего сайта? И мы тоже. Ваши иконки будут загружаться в фоновом режиме, что даст невероятную скорость вашему сайту.

Расширенная кастомизация Легко

Хотите управлять и размещать файлы Font Awesome сами? Вы можете скачать, кастомизировать и использовать иконки с вашими настройками. В наборе файлов Font Awesome есть как и простой CSS-файл, так и файлы препроцессоров: Sass и Less.

Использование CSS

1. Скопируйте полностью папку font-awesome в папку вашего проекта.
2. Вставьте нижеследующий код в тег в HTML-код вашего вебсайта.

 rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 

Использование Sass или Less

Используйте этот метод для кастомизации Font Awesome 4.7.0 при помощи LESS или SASS.

1. Скопируйте полностью папку font-awesome в папку вашего проекта.
2. В вашем проекте откройте файлы font-awesome/less/variables.less или font-awesome/scss/_variables.scss и отредактируйте @fa-font-path или $fa-font-path соответственно, для того, чтобы указать путь к папке со шрифтами.

Продвинутый уровень Профи

Less Ruby Gem

Используйте официальный Font Awesome LESS Ruby Gem для легкого внедрения Font Awesome LESS в Rails-проект. Занимается поддержкой:@supercodepoet.

Добавьте эту строку в Gemfile вашего приложения:

$ gem install font-awesome-less 

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.less :

@import "font-awesome-sprockets"; @import "font-awesome"; 

Sass Ruby Gem

Используйте официальный Ruby Gem Font Awesome SASS для легкого подключения Font Awesome SASS в ваш Rails- или Compass-проект. Занимается поддержкой: @supercodepoet.

Добавьте нижеуказанную строку в Gemfile вашего проекта:

$ gem install font-awesome-sass 

Если вы используете Rails, то вставьте нижеуказанный код, например, в файл application.scss :

@import "font-awesome-sprockets"; @import "font-awesome"; 

Дополнительная информация

Валидаторы

Для того, чтобы обеспечить наилучший результат в старых и глючных браузерах, Font Awesome в некоторых случаях использует хаки CSS для того, чтобы обойти глюки и ошибки в браузерах. Естественно, эти хаки вызывают предупреждения при проверке кода в валидаторах. Также, Font Awesome в нескольких ситуациях использует новые свойства CSS , которые еще не полностью стандартизированы, но используются они исключительно для прогрессивного улучшения.

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

Internet Explorer 8 и @font-face

IE8 имеет несколько проблем с @font-face при совместном использовании с псевдоэлементом :before . Font Awesome как раз использует такую комбинацию. Если страница закеширована или загружена без наведенного курсора мыши на окно браузера (например, при нажатии на кнопку «обновить» или при загрузке контента через фрейм), то страница будет сгенерирована до подгрузки шрифта. Наведение курсора мыши на страницу (body) должно отобразить некоторые иконки, наведение курсора на остальные не подгруженные иконки также их реанимирует. Подробности данной проблемы.

Необходима поддержка IE7 ?

Если вам нужна поддержка IE7 , то примите мои соболезнования. Ну правда. Font Awesome 4.7.0 не поддерживает IE7и версии ниже. Вам необходимо прочитать инструкции по FA 3.2.1 для использования в IE7. Затем можете пойти и пожаловаться тому, кто потребовал поддержку IE7 .

Решение ошибок

Если у вас возникли проблемы в работе с Font Awesome, то можете поискать решение на wiki -странице по частым ошибкам. Занимается поддержкой: @gtagliala.

Источник

Get Started

Need to get icons in your web project quickly? Here’s the fastest and easiest way to use Font Awesome in your web-based projects (keep in mind you can use Font Awesome in lots of other ways, including on the desktop).

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

We’ll cover the basics of setting up Font Awesome and finding that perfect icon for your project.

Upgrading from Font Awesome 4?

We’ve tried to make upgrading as easy as possible. Get the deets on upgrading and enjoy the Font Awesome 5 with ease.

Setup Font Awesome in Your Project

Font Awesome Kits are the easiest way to get Font Awesome icons into your projects. Just create a new Font Awesome Kit and add the Kit embed code to the head of each template or page of your project where you want to add icons.

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

Browse the thousands of icons in Font Awesome 5 to find some icons you like and then add the icon name and style as CSS classes to an HTML tag.

body> i class="fas fa-user">i> i class="far fa-user">i> i class="fal fa-user">i> i class="fad fa-user">i> i class="fab fa-github-square">i> body> 

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

Now you’re ready to Rock and Roll! Take it to 11 by adding some style.

Источник

Get Started

Font Awesome CDN is the easiest way to get Font Awesome on your website or app, all with just a single line of code. No downloading or installing!

We create new embed codes for each website so you can quickly upgrade and change your preferences all without ever pushing code. To do this, we need an email address so we know which embed codes are yours and so you can come back and manage them.

Icons on your site. Fast.

Don’t mess with files locally or in production. You’ll get all of Font Awesome’s 675 icons plus CSS toolkit — all optimized for speed and no hassle.

Super-simple upgrades

Since each site gets a unique embed code, you can easily upgrade to the latest version of Font Awesome, all without pushing any code. Easy peasy.

Auto accessibility support

Font Awesome CDN helps you automate accessibility support more easily so your icons work for the most people possible. Read up on our accessibility best practices.

Async your icons

Want to speed up your page loads? So do we. Have your icons load in the background so your site loads faster.

Download & Customize Easy

Want to manage and host Font Awesome assets yourself? You can download, customize, and use the icons and default styling manually. Both CSS and CSS Preprocessor (Sass and Less) formats are included.

Using CSS

1. Copy the entire font-awesome directory into your project.
2. In the of your html, reference the location to your font-awesome.min.css.

 rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> 

Using Sass or Less

Use this method to customize Font Awesome 4.7.0 using Less or Sass.

1. Copy the font-awesome/ directory into your project.
2. Open your project’s font-awesome/less/variables.less or font-awesome/scss/_variables.scss and edit the @fa-font-path or $fa-font-path variable to point to your font directory.

Advanced & Packages Pro

Less Ruby Gem

Use the Official Font Awesome Less Ruby Gem to easily get Font Awesome Less into a Rails project. Generously maintained by @supercodepoet.

Add this line to your application’s Gemfile:

$ gem install font-awesome-less 

If you use Rails, add this to your e.g. application.less :

@import "font-awesome-sprockets"; @import "font-awesome"; 

Sass Ruby Gem

Use the Official Font Awesome Sass Ruby Gem to easily get Font Awesome Sass into a Rails or Compass project. Generously maintained by @supercodepoet.

Add this line to your application’s Gemfile:

$ gem install font-awesome-sass 

If you use Rails, add this to your e.g. application.scss :

@import "font-awesome-sprockets"; @import "font-awesome"; 

More Information

Validators

In order to provide the best possible experience to old and buggy browsers, Font Awesome uses CSS browser hacks in several places to target special CSS to certain browser versions in order to work around bugs in the browsers themselves. These hacks understandably cause CSS validators to complain that they are invalid. In a couple places, we also use bleeding-edge CSS features that aren’t yet fully standardized, but these are used purely for progressive enhancement.

These validation warnings don’t matter in practice since the non-hacky portion of our CSS does fully validate and the hacky portions don’t interfere with the proper functioning of the non-hacky portion, hence why we deliberately ignore these particular warnings.

Internet Explorer 8 and @font-face

IE8 has some issues with @font-face when combined with :before . Font Awesome uses that combination. If a page is cached, and loaded without the mouse over the window (i.e. hit the refresh button or load something in an iframe) then the page gets rendered before the font loads. Hovering over the page (body) will show some of the icons and hovering over the remaining icons will show those as well. See issue #954 for details.

Need IE7 Support?

If you need IE7 support, you have my condolences. Really. Font Awesome 4.7.0 doesn’t support IE7, but an older version does. You’ll need to check out the 3.2.1 instructions for using IE7. Then go complain to whoever decided your project needs IE7 support.

Troubleshooting

If you’re having trouble with Font Awesome, make sure to check out the troubleshooting wiki page. Generously maintained by @gtagliala.

Источник