Иконки, как создать ? PNG Hat
2015-10-16
Михаил Ведерников
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. Это значит что для добавления картинки понадобится только код.
Как с ним работать ?
- Скачать сам плагин для Photoshop CC
- Открыть в меню Photoshop Окно>Расширения>PNG Hat
- Найти на макете нужный элемент и скопировать его (можно копировать нужный слой или вырезать инструментом "Раскройка")
- Создать новый холст ctrl+n(Windows) или cmd+n(mac), если перед этим элемент был скопирован то Photoshop автоматически установит размер холста.
- Добавить на холст элемент.
- На холсте перейти в слои и выбрать элемент.
- В PNG Hat перейти на вкладку Base 64
- Уточнить формат jpeg или png
- Нажать на кнопку Export selected layers
- Выбрать нужный код при помощи выпадающего меню.
Используются стандарты font-awesome
добавьте свой комментарий