Форум Сайтостроение Веб-строительство

атрибут data-icon список значений

D
На сайте с 28.06.2008
Offline
1114
Dram
3186

Где посмотреть стандартный набор значений для атрибутов data-icon? Что-то не могу найти.

M
На сайте с 02.06.2010
Offline
78
mion
#1

http://demos.jquerymobile.com/1.0a2/#docs/buttons/buttons-icons.html

D
На сайте с 28.06.2008
Offline
1114
Dram
#2

Это к сожалению далеко не все. Помню использовал иконки человечика, чемоданчик, домик..... а вот примеров найти не могу...

M
На сайте с 02.06.2010
Offline
78
mion
#3

Вообще data-***** стандартного атрибута такого нет (ни у html5 и ни у jquery ). Вместо звездочек может использоваться что угодно - это все зависит от разработчика. Скорей всего список иконок в вашем случае зависит от используемого js-плагина. Вам нужно узнать через какой плагин вы выводили те иконки и после этого будет возможность найти нужный вам список..

Переход при нажатии на SMS биллинг А1 Агрегатор [HTML, JS] Не стандартный
D
На сайте с 28.06.2008
Offline
1114
Dram
#4

Наверное что-то типо этого http://fontello.com/

M
На сайте с 02.06.2010
Offline
78
mion
#5

Там используется в качестве иконок шрифт:

http://codevisually.com/fontomas-a-tool-that-helps-to-combine-iconic-webfonts/

Вот сейчас новая версия у них:

http://fontello.com/

D
На сайте с 28.06.2008
Offline
1114
Dram
#6

Нашел - вот http://potapov.com.ua/library/50/ Можно прям иконки вставлять data-icon="✈"

M
На сайте с 02.06.2010
Offline
78
mion
#7

Скачивайте тот плагин с формой, там есть шрифты, заберите только их:

http://tympanus.net/Tutorials/LoginRegistrationForm/LoginRegistrationForm.zip

В CSS внесите эти строки, подправив верные пути до шрифтов от корня вашего проекта.


/** fonts used for the icons **/
@font-face {
font-family: 'FontomasCustomRegular';
src: url('fonts/fontomas-webfont.eot');
src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontomas-webfont.woff') format('woff'),
url('fonts/fontomas-webfont.ttf') format('truetype'),
url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/** the magic icon trick ! **/
[data-icon]:after {
content: attr(data-icon);
font-family: 'FontomasCustomRegular';
color: rgb(106, 159, 171);
position: absolute;
left: 10px;
top: 35px;
width: 30px;
}

По идеи все. Теперь должны работать data-icon="a-z и другие буквы", но не проверял))), спать уже иду. Удачи!:)

Адаптивный дизайн что прописывать Оптимизация CSS распределение css стилей

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий