Иконки, как создать ? PNG Hat

HTML

<span class="icon"></span>

CSS

.icon{
  display: inline-block;
  font: normal normal normal 14px/1 YourFont;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon:before{
//  Добавление иконки при помощи unicode  или background-image
}

unicode

.icon:before{
    content:'\f066'
}

background-image

.icon:before{
    content:'';
    display: inline-block;
    width:..px;
    height:..px;
    background-image: src или data;
    background-repeat: no repeat;
    //background-size: 100%;
    //background-position: 0 50%;
}

Получить изображение через data

При помощи плагина для Photoshop PNG Hat можно получить изображение через data. Это значит что для добавления картинки понадобится только код.

Как с ним работать ?

1. Скачать сам плагин для Photoshop CC
2. Открыть в меню Photoshop Окно>Расширения>PNG Hat
3. Найти на макете нужный элемент и скопировать его (можно копировать нужный слой или вырезать инструментом "Раскройка")
4. Создать новый холст ctrl+n(Windows) или cmd+n(mac), если перед этим элемент был скопирован то Photoshop автоматически установит размер холста.
5. Добавить на холст элемент.
6. На холсте перейти в слои и выбрать элемент.
7. В PNG Hat перейти на вкладку Base 64
8. Уточнить формат jpeg или png
9. Нажать на кнопку Export selected layers
10. Выбрать нужный код при помощи выпадающего меню.

Используются стандарты font-awesome