Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS
Это все очень просто можно сделать при помощи CSS.
Каждый файл у нас — это ссылка.
Итак:
<a href='downloads/myArch.zip'>myArch.zip</a>* This source code was highlighted with Source Code Highlighter.
Теперь прописываем общий стиль в CSS:
a{ padding-left: 18px; background-position: 0 0; background: transparent url(icon.png) no-repeat;}
* This source code was highlighted with Source Code Highlighter.
То есть мы задали смещение для текста ссылки на 18 пикс влево, и установили картинку в фон. Эта картинка будет показываться по-умолчанию, то есть если пользователь добавит файл, не описанный нами.
Теперь приступим к описанию типов файлов:
a[href $='.pdf'] { padding-left: 18px; background-position: 0 0; background: transparent url(pdf.png) no-repeat;}a[href $='.zip'] { padding-left: 18px; background-position: 0 0; background: transparent url(zip.png) no-repeat;}
* This source code was highlighted with Source Code Highlighter.
И т.д. то есть мы прописываем для каждого типа файла свою иконку и свой стиль (в принципе, мы можем даже подсвечивать каждый тип файла своим цветом).

Пример отображения архива, в html написано только:
<a href=psycho.zip>psycho.zip</a>
* This source code was highlighted with Source Code Highlighter.
Живой пример
PS: Это мой первый хабратопик, не судите строго.
(C) Хабрахабр
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Блог им. 3ds / Колонки одинаковой высоты + border-bottom!
Begin На хабре наверно уже миллион статей про колонки одинаковой высоты. Вы спросите зачем нам нужна еще одна статья в 1001й раз? Вот в чем затык Проблема в том, что колонки одинаковой высоты с... читать далее
как создавать очень красивые и удобные текстовые кнопки
Эта инструкция научит Вас, как создавать очень красивые и удобные текстовые кнопки (с эффектом нажатия), используя CSS.... читать далее
Защищаем движок Dle от спам ссылок
Крайне полезная статья с сайта seomax.info И так, давайте сразу приготовим все, что нам нужно, так сказать "ящик инструментов", в этот ящик мы положим: 1. Notepad++, это отличный, бесплатный блокнот... читать далее
Скругленные границы через CSS
Боремся с дизайнерскими фантазиями — ищем простые способы верстки скругленных границ и произвольных многоугольников Сложность элементов интерфейса увеличивается с каждым новым макетом, что доставляет... читать далее
Немного о CSS свойством «background-image»
CSS свойство « background-image » служит для заливки чего-либо (блока, ячейки таблицы, страницы целиком) фоновым рисунком. Что можно сделать, используя это свойство?... читать далее
Интерактивные банеры для CMS DLE в примерах
В последних реализациях DLE улучшена защита и как следствие запуск ява-скриптов из тела страницы затруднен но допустим у вас есть потребность в прикручивании информеров или дополнительных сервисных... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru HTML html html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте
кабриолет на свадьбу Москва