Тема: Иконка (WAP/WEB мастеру/Помощь мастерам)

I R R (1 Mar 2014 в 15:08)
Вот это

I R R (1 Mar 2014 в 15:09)
это

I R R (1 Mar 2014 в 15:09)
это вот

НУЖНА ПОМОЩЬ (1 Mar 2014 в 15:10)
я могу

forsim (1 Mar 2014 в 15:12)
У меня есть все четыре.

Простой (1 Mar 2014 в 15:15)
такой не пойдет ?

Простой (1 Mar 2014 в 15:17)
не крепится

I R R (1 Mar 2014 в 15:21)
и где?

Стритрейсер (1 Mar 2014 в 15:31)
Держи

Кредитор (1 Mar 2014 в 15:33)
а зачем делить ? ))

forsim (1 Mar 2014 в 15:34)
--Цитата--
Кредитор (1 Mar 2014 в 15:33):
а зачем делить ? ))
----------
Кредитор, предлагаешь слотом выводить-

I R R (1 Mar 2014 в 15:35)
Кредитор, покажи,как можно без

I R R (1 Mar 2014 в 15:36)
Hatchet, спасибо!

Кредитор (1 Mar 2014 в 15:38)
I R R, я не вижу саму картинку . Предполагаю что это спрайт

I R R (1 Mar 2014 в 15:41)
Кредитор, 
http://dcms-social.ru/user/personalfiles/2909/3222/?id_file=5264&page=1

Кредитор (1 Mar 2014 в 15:44)
--Цитата--
I R R (1 Mar 2014 в 15:35):
Кредитор, покажи,как можно без
----------
I R R, эти иконки специально соединяют в одну картинку. Почитай в гугл про css спрайты. Это твоего рода оптимизация. Чтобы браузер не обращался к серверу, скачивая миллион картинок, а скачал одну. А с помощью css эти картинки по отдельности показываются уже. Пример на одноклассниках, вк, твиттер

I R R (1 Mar 2014 в 15:46)
Кредитор, спасибо!

Кредитор (1 Mar 2014 в 15:59)
I R R, я могу и пример показать, если интересно, с спрайтом одноклассников

forsim (1 Mar 2014 в 16:01)
--Цитата--
Кредитор (1 Mar 2014 в 15:44):
I R R, эти иконки специально соединяют в одну картинку. Почитай в гугл про css спрайты. Это твоего рода оптимизация. Чтобы браузер не обращался к серверу, скачивая миллион картинок, а скачал одну. А с помощью css эти картинки по отдельности показываются уже. Пример на одноклассниках, вк, твиттер
----------
Кредитор, это все понятно, но как их выводить? С css?

Zed (1 Mar 2014 в 16:02)
--Цитата--
forsim (1 Mar 2014 в 16:01):
Кредитор, это все понятно, но как их выводить? С css?
----------
forsim, забей в гугл в поиск там статья на хабре будет,там всё расписано

Кредитор (1 Mar 2014 в 16:05)
forsim, да

I R R (1 Mar 2014 в 16:31)
Кредитор, покажи

Кредитор (1 Mar 2014 в 22:45)
примерно вот так:
.header_icons {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: middle;
    background: url(/style/icons_common/headermenu.png) -0px 0;
}
.i-hmain { width:26px; height:26px; background-position: 0px 170px; } 
.i-hkolokol { width:24px; height:24px; background-position: 0px 144px; } 
.i-hmail { width:24px; height:24px; background-position: 0px 120px; } 
.i-hplus { width:24px; height:24px; background-position: 0px 95px; }
.i-hlenta { width:24px; height:24px; background-position: 0px 72px; } 
.i-hkomment { width:24px; height:24px; background-position: 0px 47px; } 
.i-hgosti { width:24px; height:24px; background-position: 0px 24px; }

Кредитор (1 Mar 2014 в 22:48)
потом сама иконка выводится так:
<a class=\"user_aut\" href=\"/user/new-mess/\"><span class=\"header_icons i-hmail\"></span>+{$msg_new}</a>
//span это и есть иконка. Почта

Engine (1 Mar 2014 в 22:52)
РЕКЛАМА

Zed (1 Mar 2014 в 22:53)
Я также делал,но только картинок не много а по одной))) Я и не знал что так можно делать

Кредитор (1 Mar 2014 в 22:53)
Dark_ AKC, реклама?

Engine (1 Mar 2014 в 22:57)
Кредитор, статья. В правилах разрешено давать ссылку на один файл, тему, статью касающуюся рассматриваемой темы

Источник: http://www.dcms-social.ru/forum/20/44/16781/