Иконка класс: Иконки классы — 24,437 бесплатных иконок

Разное 

Содержание

Классы иконок

40 новых иконок в версии 4.2

fa-angellist

fa-area-chart

fa-at

fa-bell-slash

fa-bell-slash-o

fa-bicycle

fa-binoculars

fa-birthday-cake

fa-bus

fa-calculator

fa-cc

fa-cc-amex

fa-cc-discover

fa-cc-mastercard

fa-cc-paypal

fa-cc-stripe

fa-cc-visa

fa-copyright

fa-eyedropper

fa-futbol-o

fa-google-wallet

fa-ils

fa-ioxhost

fa-lastfm

fa-lastfm-square

fa-line-chart

fa-meanpath

fa-newspaper-o

fa-paint-brush

fa-paypal

fa-pie-chart

fa-plug

fa-shekel (alias)

fa-sheqel (alias)

fa-slideshare

fa-soccer-ball-o (alias)

fa-toggle-off

fa-toggle-on

fa-trash

fa-tty

fa-twitch

fa-wifi

fa-yelp

Иконки веб-приложений

fa-adjust

fa-anchor

fa-archive

fa-area-chart

fa-arrows

fa-arrows-h

fa-arrows-v

fa-asterisk

fa-at

fa-automobile (alias)

fa-ban

fa-bank (alias)

fa-bar-chart

fa-bar-chart-o (alias)

fa-barcode

fa-bars

fa-beer

fa-bell

fa-bell-o

fa-bell-slash

fa-bell-slash-o

fa-bicycle

fa-binoculars

fa-birthday-cake

fa-bolt

fa-bomb

fa-book

fa-bookmark

fa-bookmark-o

fa-briefcase

fa-bug

fa-building

fa-building-o

fa-bullhorn

fa-bullseye

fa-bus

fa-cab (alias)

fa-calculator

fa-calendar

fa-calendar-o

fa-camera

fa-camera-retro

fa-car

fa-caret-square-o-down

fa-caret-square-o-left

fa-caret-square-o-right

fa-caret-square-o-up

fa-cc

fa-certificate

fa-check

fa-check-circle

fa-check-circle-o

fa-check-square

fa-check-square-o

fa-child

fa-circle

fa-circle-o

fa-circle-o-notch

fa-circle-thin

fa-clock-o

fa-close (alias)

fa-cloud

fa-cloud-download

fa-cloud-upload

fa-code

fa-code-fork

fa-coffee

fa-cog

fa-cogs

fa-comment

fa-comment-o

fa-comments

fa-comments-o

fa-compass

fa-copyright

fa-credit-card

fa-crop

fa-crosshairs

fa-cube

fa-cubes

fa-cutlery

fa-dashboard (alias)

fa-database

fa-desktop

fa-dot-circle-o

fa-download

fa-edit (alias)

fa-ellipsis-h

fa-ellipsis-v

fa-envelope

fa-envelope-o

fa-envelope-square

fa-eraser

fa-exchange

fa-exclamation

fa-exclamation-circle

fa-exclamation-triangle

fa-external-link

fa-external-link-square

fa-eye

fa-eye-slash

fa-eyedropper

fa-fax

fa-female

fa-fighter-jet

fa-file-archive-o

fa-file-audio-o

fa-file-code-o

fa-file-excel-o

fa-file-image-o

fa-file-movie-o (alias)

fa-file-pdf-o

fa-file-photo-o (alias)

fa-file-picture-o (alias)

fa-file-powerpoint-o

fa-file-sound-o (alias)

fa-file-video-o

fa-file-word-o

fa-file-zip-o (alias)

fa-film

fa-filter

fa-fire

fa-fire-extinguisher

fa-flag

fa-flag-checkered

fa-flag-o

fa-flash (alias)

fa-flask

fa-folder

fa-folder-o

fa-folder-open

fa-folder-open-o

fa-frown-o

fa-futbol-o

fa-gamepad

fa-gavel

fa-gear (alias)

fa-gears (alias)

fa-gift

fa-glass

fa-globe

fa-graduation-cap

fa-group (alias)

fa-hdd-o

fa-headphones

fa-heart

fa-heart-o

fa-history

fa-home

fa-image (alias)

fa-inbox

fa-info

fa-info-circle

fa-institution (alias)

fa-key

fa-keyboard-o

fa-language

fa-laptop

fa-leaf

fa-legal (alias)

fa-lemon-o

fa-level-down

fa-level-up

fa-life-bouy (alias)

fa-life-buoy (alias)

fa-life-ring

fa-life-saver (alias)

fa-lightbulb-o

fa-line-chart

fa-location-arrow

fa-lock

fa-magic

fa-magnet

fa-mail-forward (alias)

fa-mail-reply (alias)

fa-mail-reply-all (alias)

fa-male

fa-map-marker

fa-meh-o

fa-microphone

fa-microphone-slash

fa-minus

fa-minus-circle

fa-minus-square

fa-minus-square-o

fa-mobile

fa-mobile-phone (alias)

fa-money

fa-moon-o

fa-mortar-board (alias)

fa-music

fa-navicon (alias)

fa-newspaper-o

fa-paint-brush

fa-paper-plane

fa-paper-plane-o

fa-paw

fa-pencil

fa-pencil-square

fa-pencil-square-o

fa-phone

fa-phone-square

fa-photo (alias)

fa-picture-o

fa-pie-chart

fa-plane

fa-plug

fa-plus

fa-plus-circle

fa-plus-square

fa-plus-square-o

fa-power-off

fa-print

fa-puzzle-piece

fa-qrcode

fa-question

fa-question-circle

fa-quote-left

fa-quote-right

fa-random

fa-recycle

fa-refresh

fa-remove (alias)

fa-reorder (alias)

fa-reply

fa-reply-all

fa-retweet

fa-road

fa-rocket

fa-rss

fa-rss-square

fa-search

fa-search-minus

fa-search-plus

fa-send (alias)

fa-send-o (alias)

fa-share

fa-share-alt

fa-share-alt-square

fa-share-square

fa-share-square-o

fa-shield

fa-shopping-cart

fa-sign-in

fa-sign-out

fa-signal

fa-sitemap

fa-sliders

fa-smile-o

fa-soccer-ball-o (alias)

fa-sort

fa-sort-alpha-asc

fa-sort-alpha-desc

fa-sort-amount-asc

fa-sort-amount-desc

fa-sort-asc

fa-sort-desc

fa-sort-down (alias)

fa-sort-numeric-asc

fa-sort-numeric-desc

fa-sort-up (alias)

fa-space-shuttle

fa-spinner

fa-spoon

fa-square

fa-square-o

fa-star

fa-star-half

fa-star-half-empty (alias)

fa-star-half-full (alias)

fa-star-half-o

fa-star-o

fa-suitcase

fa-sun-o

fa-support (alias)

fa-tablet

fa-tachometer

fa-tag

fa-tags

fa-tasks

fa-taxi

fa-terminal

fa-thumb-tack

fa-thumbs-down

fa-thumbs-o-down

fa-thumbs-o-up

fa-thumbs-up

fa-ticket

fa-times

fa-times-circle

fa-times-circle-o

fa-tint

fa-toggle-down (alias)

fa-toggle-left (alias)

fa-toggle-off

fa-toggle-on

fa-toggle-right (alias)

fa-toggle-up (alias)

fa-trash

fa-trash-o

fa-tree

fa-trophy

fa-truck

fa-tty

fa-umbrella

fa-university

fa-unlock

fa-unlock-alt

fa-unsorted (alias)

fa-upload

fa-user

fa-users

fa-video-camera

fa-volume-down

fa-volume-off

fa-volume-up

fa-warning (alias)

fa-wheelchair

fa-wifi

fa-wrench

Иконки типов файлов

fa-file

fa-file-archive-o

fa-file-audio-o

fa-file-code-o

fa-file-excel-o

fa-file-image-o

fa-file-movie-o (alias)

fa-file-o

fa-file-pdf-o

fa-file-photo-o (alias)

fa-file-picture-o (alias)

fa-file-powerpoint-o

fa-file-sound-o (alias)

fa-file-text

fa-file-text-o

fa-file-video-o

fa-file-word-o

fa-file-zip-o (alias)

Иконки загрузки

  • These icons work great with the fa-spin class. Check out the spinning icons example.

fa-circle-o-notch

fa-cog

fa-gear (alias)

fa-refresh

fa-spinner

Иконки элементов формы

fa-check-square

fa-check-square-o

fa-circle

fa-circle-o

fa-dot-circle-o

fa-minus-square

fa-minus-square-o

fa-plus-square

fa-plus-square-o

fa-square

fa-square-o

Иконки способов оплаты

fa-cc-amex

fa-cc-discover

fa-cc-mastercard

fa-cc-paypal

fa-cc-stripe

fa-cc-visa

fa-credit-card

fa-google-wallet

fa-paypal

Иконки диаграмм

fa-area-chart

fa-bar-chart

fa-bar-chart-o (alias)

fa-line-chart

fa-pie-chart

Пиктограммы валют

fa-bitcoin (alias)

fa-btc

fa-cny (alias)

fa-dollar (alias)

fa-eur

fa-euro (alias)

fa-gbp

fa-ils

fa-inr

fa-jpy

fa-krw

fa-money

fa-rmb (alias)

fa-rouble (alias)

fa-rub

fa-ruble (alias)

fa-rupee (alias)

fa-shekel (alias)

fa-sheqel (alias)

fa-try

fa-turkish-lira (alias)

fa-usd

fa-won (alias)

fa-yen (alias)

Пиктограммы редактирования текста

fa-align-center

fa-align-justify

fa-align-left

fa-align-right

fa-bold

fa-chain (alias)

fa-chain-broken

fa-clipboard

fa-columns

fa-copy (alias)

fa-cut (alias)

fa-dedent (alias)

fa-eraser

fa-file

fa-file-o

fa-file-text

fa-file-text-o

fa-files-o

fa-floppy-o

fa-font

fa-header

fa-indent

fa-italic

fa-link

fa-list

fa-list-alt

fa-list-ol

fa-list-ul

fa-outdent

fa-paperclip

fa-paragraph

fa-paste (alias)

fa-repeat

fa-rotate-left (alias)

fa-rotate-right (alias)

fa-save (alias)

fa-scissors

fa-strikethrough

fa-subscript

fa-superscript

fa-table

fa-text-height

fa-text-width

fa-th

fa-th-large

fa-th-list

fa-underline

fa-undo

fa-unlink (alias)

Пиктограммы направлений

fa-angle-double-down

fa-angle-double-left

fa-angle-double-right

fa-angle-double-up

fa-angle-down

fa-angle-left

fa-angle-right

fa-angle-up

fa-arrow-circle-down

fa-arrow-circle-left

fa-arrow-circle-o-down

fa-arrow-circle-o-left

fa-arrow-circle-o-right

fa-arrow-circle-o-up

fa-arrow-circle-right

fa-arrow-circle-up

fa-arrow-down

fa-arrow-left

fa-arrow-right

fa-arrow-up

fa-arrows

fa-arrows-alt

fa-arrows-h

fa-arrows-v

fa-caret-down

fa-caret-left

fa-caret-right

fa-caret-square-o-down

fa-caret-square-o-left

fa-caret-square-o-right

fa-caret-square-o-up

fa-caret-up

fa-chevron-circle-down

fa-chevron-circle-left

fa-chevron-circle-right

fa-chevron-circle-up

fa-chevron-down

fa-chevron-left

fa-chevron-right

fa-chevron-up

fa-hand-o-down

fa-hand-o-left

fa-hand-o-right

fa-hand-o-up

fa-long-arrow-down

fa-long-arrow-left

fa-long-arrow-right

fa-long-arrow-up

fa-toggle-down (alias)

fa-toggle-left (alias)

fa-toggle-right (alias)

fa-toggle-up (alias)

Иконки видеоплеера

fa-arrows-alt

fa-backward

fa-compress

fa-eject

fa-expand

fa-fast-backward

fa-fast-forward

fa-forward

fa-pause

fa-play

fa-play-circle

fa-play-circle-o

fa-step-backward

fa-step-forward

fa-stop

fa-youtube-play

Иконки брендов

fa-adn

fa-android

fa-angellist

fa-apple

fa-behance

fa-behance-square

fa-bitbucket

fa-bitbucket-square

fa-bitcoin (alias)

fa-btc

fa-cc-amex

fa-cc-discover

fa-cc-mastercard

fa-cc-paypal

fa-cc-stripe

fa-cc-visa

fa-codepen

fa-css3

fa-delicious

fa-deviantart

fa-digg

fa-dribbble

fa-dropbox

fa-drupal

fa-empire

fa-facebook

fa-facebook-square

fa-flickr

fa-foursquare

fa-ge (alias)

fa-git

fa-git-square

fa-github

fa-github-alt

fa-github-square

fa-gittip

fa-google

fa-google-plus

fa-google-plus-square

fa-google-wallet

fa-hacker-news

fa-html5

fa-instagram

fa-ioxhost

fa-joomla

fa-jsfiddle

fa-lastfm

fa-lastfm-square

fa-linkedin

fa-linkedin-square

fa-linux

fa-maxcdn

fa-meanpath

fa-openid

fa-pagelines

fa-paypal

fa-pied-piper

fa-pied-piper-alt

fa-pinterest

fa-pinterest-square

fa-qq

fa-ra (alias)

fa-rebel

fa-reddit

fa-reddit-square

fa-renren

fa-share-alt

fa-share-alt-square

fa-skype

fa-slack

fa-slideshare

fa-soundcloud

fa-spotify

fa-stack-exchange

fa-stack-overflow

fa-steam

fa-steam-square

fa-stumbleupon

fa-stumbleupon-circle

fa-tencent-weibo

fa-trello

fa-tumblr

fa-tumblr-square

fa-twitch

fa-twitter

fa-twitter-square

fa-vimeo-square

fa-vine

fa-vk

fa-wechat (alias)

fa-weibo

fa-weixin

fa-windows

fa-wordpress

fa-xing

fa-xing-square

fa-yahoo

fa-yelp

fa-youtube

fa-youtube-play

fa-youtube-square

Медицинские иконки

fa-ambulance

fa-h-square

fa-hospital-o

fa-medkit

fa-plus-square

fa-stethoscope

fa-user-md

fa-wheelchair

Как использовать и оформлять иконки с помощью CSS?

  1. Необходимые шаги для использования иконок
  2. Использование иконок Font Awesome
  3. Масштаб иконок Font Awesome и их цвет
  4. Использование иконок с кнопками
  5. Добавление эффекта тени к иконкам
  6. Использование иконок Font Awesome в списке
  7. Анимация иконок Font Awesome
  8. Поворот иконок Font Awesome

Для того, чтобы использовать иконки, вам необходимо следовать этим шагам:

Скопируйте код, предоставленный веб-страницей Font Awesome, и вставьте в <head> каждого шаблона или страницы, где хотите использовать иконки Font Awesome.

Для использования последней версии иконок this page смотрите эту страницу .

Здесь мы используем версию 5.8.1 link rel, чтобы определить связь между текущим документом и файлом со ссылкой:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Загрузка и установка не требуются.

Иконки должны быть расположены внутри элемента <body>. Найдите необходимую вам иконку и скопируйте ее HTML код.

Код иконки будет выглядеть следующим образом:

<i></i>

Можно легко изменить размер и цвет иконки и даже добавить к ней тени, используя только CSS. Иконки также могут быть перемещаемы и анаимируемы.

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента <i> для ссылки на элемент:

<i></i>

Или используйте элемент span:

<span></span>

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  </head>
  <body>
    <h3>Пример иконок</h3>
    <p>Камера</p>
    <i></i>
    <p>Машина</p>
    <i></i> 
    <p>Конверт</p>
    <i></i>
  </body>
</html>

Попробуйте сами!

Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span>fa-sm, fa-lg, fa-2x и др.

Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      div {
      color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h3>Пример иконок с указанными размерами и цветами</h3>
    <div>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>

Попробуйте сами!

Смотрите детали:

Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      i {
      color: #8ebf42;
      }
      .star {
      font-size: 2em;
      }
    </style>
  </head>
  <body>
    <h3>Пример иконок с установленными размерами шрифта и цвета</h3>
    <div>
      <p>Иконка с размером по умолчанию.</p>
      <i></i>
      <p>Font-size: 2em;</p>
      <i></i>
    </div>
  </body>
</html>

Попробуйте сами!

Вы можете также добавить иконки при создании кнопок. Просто вставьте иконку в элемент <button>.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Кнопки с иконками</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      button {
      border: none;
      border-radius: 5px;
      color: #ffffff;
      padding: 10px 14px;
      font-size: 16px;
      cursor: pointer;
      }
      button:hover {
      background-color: #666666;
      box-shadow: 2px 4px #999999;
      }
      .btn {
      background-color: #999999;
      }
      .home {
      background-color: #ff6347;
      }
      .menu {
      background-color: #008080;
      }
      .about {
      background-color: #e6b800;
      }
    </style>
  </head>
  <body>
    <h3>Кнопки с иконками</h3>
    <p>Icon buttons:</p>
    <button>
    <i></i>
    </button>
    <button>
    <i></i>
    </button>
    <button>
    <i></i>
    </button>
    <p>Кнопки с иконками текстов и разными цветами:</p>
    <button>
    <i></i> Home
    </button>
    <button>
    <i></i> Menu
    </button>
    <button>
    <i></i> About
    </button>
  </body>
</html>

Попробуйте сами!

Для добавления эффектов тени к иконкам необходимо CSS свойство text-shadow.

Установите тень для того элемента, к которому относится иконка:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Пример иконок с тенью текста</h3>
    <div> 
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </div>
  </body>
</html>

Попробуйте сами!

С помощью иконок можно сделать много всего! Можете оформлять ваши HTML списки в виде декоративных маркеров.

Используйте класс fa-ul для элемента <ul> и класс fa-li для элемента <li>, чтобы заменить маркеры по умолчанию в неупорядоченном списке.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style>
      span {
      color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h3>Иконки в примере со списком</h3>
    <ul>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 1
      </li>
      <li>
        <span>
        <i></i>
        </span>List item 2
      </li>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 3
      </li>
      <li>
        <span>
        <i></i>
        </span>Элемент списка 4
      </li>
    </ul>
  </body>
</html>

Попробуйте сами!

Используйте класс fa-spin для плавного вращения иконки и класс fa-pulsefa-spinner.

Будет выглядеть таким образом:

<i></i>

Смотрите пример, чтобы увидеть разницу между классами fa-spin и fa-pulse:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Иконки с классами fa-spin и fa-pulse</h3>
    <p>Spinner spin:</p>
    <i></i>
    <p>Spinner pulse:</p>
    <i></i>
  </body>
</html>

Попробуйте сами!

Пример с несколькими анимированными иконками:

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Анимированные иконки</h3>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </body>
</html>

Попробуйте сами!

Довольно часто для дополнительного дизайна вам может понадобиться поворачивать, отражать иконку.

Для произвольного поворота и отражения иконок используйте классы fa-rotate-* и fa-flip-*.

Пример

<!DOCTYPE html> 
<html>
  <head>
    <title>Иконки Font Awesome</title>
    <link rel="stylesheet" href="https://use. fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    <style> 
      i { 
      color: #1c87c9; 
      text-shadow: 2px 2px 4px #00ffff; 
      font-size: 30px; 
      } 
    </style>
  </head>
  <body>
    <h3>Поворот иконок</h3>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </body>
</html>

Попробуйте сами!

Смотрите градус и детали вращения:

Навигационная панель. Компоненты · Bootstrap. Версия v4.0.0

Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам надо знать перед использованием навбара:

  • Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
  • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
  • Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
  • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
  • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотри класс отображения.
  • Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Дальше вы увидите примеры и список поддерживаемых под-компонентов.

Поддерживаемые типы содержимого

В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:

  • .navbar-brand для названия вашей компании, продукта или имени проекта.
  • .navbar-nav для навигации полной высоты (включая выпадающие элементы).
  • .navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
  • .form-inline для любых органов контроля форм и действий с ними.
  • .navbar-text для добавления вертикально центрированных строк текста.
  • .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте lg (большой).

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div aria-labelledby="navbarDropdown">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <div></div>
          <a href="#">Something else here</a>
        </div>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

В этом примере использованы классы цвета bg-light и спейсинга my-2, my-lg-0, mr-sm-0, my-sm-0.

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

<!-- As a link -->
<nav>
  <a href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav>
  <span>Navbar</span>
</nav>

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

<!-- Just an image -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
  </a>
</nav>
<!-- Image and text -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
    Bootstrap
  </a>
</nav>

Навбар

Ссылки в навигации навбара сделаны на параметрах класса . nav, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

И т. к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <div>
      <a href="#">Home <span>(current)</span></a>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Disabled</a>
    </div>
  </div>
</nav>

Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link, как в примере ниже.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс . form-inline.

<nav>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.

<nav>
  <a>Navbar</a>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Работают и формы ввода, также:

<nav>
  <form>
    <div>
      <div>
        <span>@</span>
      </div>
      <input type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

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

<nav>
  <form>
    <button type="button">Main button</button>
    <button type="button">Smaller button</button>
  </form>
</nav>

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

<nav>
  <span>
    Navbar text with an inline element
  </span>
</nav>

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

<nav>
  <a href="#">Navbar w/ text</a>
  <button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
    </ul>
    <span>
      Navbar text with an inline element
    </span>
  </div>
</nav>

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами . navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).

Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.

<nav>
  <a href="#">Default</a>
</nav>
<nav>
  <a href="#">Fixed top</a>
</nav>
<nav>
  <a href="#">Fixed bottom</a>
</nav>
<nav>
  <a href="#">Sticky top</a>
</nav>

Отзывчивое поведение

Навбары могут использовать классы . navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <a href="#">Hidden brand</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С «брендом», показанный слева, и тогглером — справа:

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С тогглером слева и «брендом» справа:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <a href="#">Navbar</a>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

Внешнее содержимое

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!

Collapsed content
Toggleable via the navbar brand. 
<div>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav>
    <button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
  </nav>
</div>

Ремонт и обслуживание Мерседес / Mersedes Benz в Казани

Автосервис MB-Kazan стремится предоставить своим клиентам качественный сервис и сделать владение Mercedes лучшим опытом использования автомобиля в вашей жизни.

Мы предлагаем:

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

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

Техническое обслуживание в руках профессионалов

Регулярный профессиональный контроль основных функций автомобиля и его частей гарантирует производительность и надежность вашего автомобиля. Техническое обслуживание защищает вас от ненужных затрат на ремонт и помогает сократить и время простоя авто. Автосервис MB-Kazan предоставляет качественное техобслуживание, соответствующее статусу автомобиля.

Прекрасное предложение для всех тех, кто ничего не оставляет на волю случая и полагается на квалифицированный уход за авто.

Регулярное техническое обслуживание помогает поддерживать безопасность и надежность вашего автомобиля, гарантируя, что вы и ваш автомобиль готовы проехать еще не одну тысячу километров в пути.

Качественный ремонт Mercedes-Benz (Mercedes)

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

Борьба с небольшими признаками ежедневного износа

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

Устранение поломки автомобиля — быстро и качественно

Поломки авто случаются, и их необходимо устранять. При посещении автосервиса MB-Kazan все части вашего автомобиля осматриваются изнутри, в том числе моторный отсек, днище, колеса, тормоза. При обнаружении дефекта наши специалисты начинают ремонт в соответствии со всеми нормами обслуживания авто Mercedes-Benz.

Диагностика на 5+

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

Диагностика мерседес необходима с момента возникновения неисправности или появления подозрительных признаков при езде на авто. Сигналы, которые должны привлечь ваше внимание:

  • Неисправность вашей коробки передач;
  • Снижение производительности двигателя;
  • Трудно завести авто;
  • Увеличенный расход топлива;
  • Шум в стеклоочистителях;
  • Дискомфортное торможение.

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

Обратите внимание — вы можете не замечать признаков поломки авто из списка, но заметить, что что-то пошло не так. Важно, чтобы любой признак дискомфортной эксплуатации авто был обнаружен и устранен вовремя!!!

Запчасти и аксессуары

В автосервисе MB-Kazan вы найдете автозапчасти, аксессуары и все, что может понадобиться для ремонта и регулярного технического обслуживания автомобиля мерседес бенц в Казани.

Не знаете, какая деталь нужна для автомобиля? Специалисты автосервиса помогут с выбором деталей и аксессуаров на основе характеристик вашего мерседеса. Выбор и покупка автозапчастей у нас будет приятным опытом!

Почему выбирают нас?

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

  1. Придерживаемся высоких стандартов качества. Вы приезжаете к нам и уезжаете с машиной в идеальном рабочем состоянии.
  2. Находимся недалеко от вас. Автосервис MB-Kazan расположен в г. Казань (Татарстан), Мамадышский тракт, 30 А. Проложить маршрут в картах Google или в картах Яндекс (навигатор)
  3. Не берем дополнительной платы за обслуживание. В нашем автосервисе клиенты платят только за предоставленные услуги и техсервис.
  4. Общаемся с вами. Не стесняйтесь звонить и писать нам, если вам нужна информация о конкретной услуге по ремонту или обслуживанию автомобиля. Мы будем рады сообщить вам детали.

1800 иконок премиум класса за 500 руб., исполнитель Дмитрий (pevcov) – Kwork

Бесконечные бесплатные правки в рамках технического задания и условий заказа. Платить нужно только за те изменения, которые выходят за рамки первоначального заказа. Подробнее

pevcov