---

Здравствуйте!
Наверное многим не нравится когда с их сайта что-то "копипастят".
Сейчас я вам расскажу как усложнить копирование графики (а именно иконок) с помощью css.
Все наши иконки будут вида

<i class="icon-ICON_NAME "></i>

Сначала создадим файл icons.css и подключим его к сайту.
В этом файле пропишем:

[color=#0000ff][class^="icon-"],[class*=" icon-"] {

   width: 16px;

   height: 16px;

   display: inline-block;

   vertical-align: text-top;

}[/color]

где
width: 16px; - ширина иконки
height: 16px; - высота иконки
и далее уже создаем див самой иконки:

.icon-icon_name {

    background: url(путь к иконке) no-repeat;

}

Затем icons.css можно собрать с основным стилем и прогнать его через сервис оптимизации который удалит все переносы и комментарии что сделает код еще менее читабельным.

Автор статьи: KpuTuK
Автор статьи: Admin (13.01.17 / 23:33)

---

Рейтинг: 0

Просмотров: 553
Комментарии (1) »