Иконки файлов на CSS

В профиле colorswall на гите появился репозиторий с иконками для веб-проектов выполненных на CSS.

Иконки файлов на CSS

Как подключить?

Подключите css-файл css-file-icons.css на страницу с HTML или установите через npm:

npm i css-file-icons --save

а затем подключите css командой build.

Как использовать?

Расширения файлов

.fi.fi-*extension*
// where *extension* = file extension.
// example: .fi.fi-doc

Полный список поддерживаемых форматов: doc, docx, log, txt, wps, csv, dat, ppt, xml, mp3, wav, avi, mov, mp4, 3ds, max, gif, ai, svg, pdf, xls, xlsx, sql, exe, js, html, xhtml, css, asp, ttf, dll, 7z, zip, c, cs, java, swift, torrent, php, hh, go, py, rss, rb.

Размер иконок

.fi.fi-size-sm // default
.fi.fi-size-md
.fi.fi-size-lg
.fi.fi-size-x

Демо

Интересное по теме…

Набор иконок: рождество Полностью кастомизируемые иконки с толщиной линией 3.5 pt. Идеально подойдут для мобильных приложений, сайтов и интерфейса. Этот набор содержит: колокольчики, снежинки, новогодние деревья, шампанское, подарки, снеговики, сладости, зимние виды деятельности, олени, звезды, свечи, календарь, шляпы, игрушки, Санту, конфеты и другие иконки. ...
Набор иконок: Космос Cosmos — это коллекция векторных иконок от Ego Altere, содержащая 9 космических значков. Иконки будут полезны для логотипа, наклеек, плакатов и многих других дизайнерских работ. Иконки доступны в формате SVG, который полностью кастомизируется. Эти иконки можно использовать как в персональных, так и в коммерческих целях. ...
Оформление «битых» изображений Битые изображения уродливы. Но с помощью CSS можно дополнить информацию, и сделать их более выразительными. Два факта о стилизации img-элемента Мы можем стилизовать типографику. Например, alt-атрибут (описание изображения).Мы можем изменить внешний вид поломанных изображений с помощью псевдоэлементов :before и :after. Они о...
Набор иконок: дизайн и удаленная работа Набор из 20 значков для дизайнеров и фрилансеров. Бесплатный набор для дизайнеров Включает основные инструменты проектирования: инструмент обрезки, значок пипетки и мольберт. Подходит для проектов связанных с дизайном. Экономия времени Эти бесплатные векторные иконки сэкономят время при разработке веб-дизайна или мобильно...
В сети
printerest icon
Behance icon
CodePen icon
GitHub icon
© Roman Volgasov, 2018