JQuery размер мобильной навигации значок бар

Я использую этот кусок кода для моей навигационной панелиJQuery размер мобильной навигации значок бар

<a href="#home" data-icon="home" data-iconpos="top" class="ui-btn-active ui-state-persist">Home</a>

со следующими CSS

.ui-icon-home { 
     background: url("home.png") no-repeat 50% 50% !important;  
}

Этот код прекрасно работает и заменяет по умолчанию изображение значка, но я не могу здесь используются большие значки. Я хочу использовать значки 22 * 22 px. Когда я пытаюсь использовать значки 22 * 22 px jQuery Mobile заключает в себя иконки внутри круга и, таким образом, показывая только часть моего пользовательского значка, я хочу удалить круг.

источник

2012-02-19 h_a86

Класс .ui-icon в jQuery mobile имеет радиус границы 9 px. Это может быть причиной ваших проблем. Попробуйте изменить CSS для:

.ui-icon-home { 
    background: url("home.png") no-repeat 50% 50% !important;  
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    border-radius:0px 
}

источник

2012-02-19 12:37:56 Hessius

Вы можете использовать следующие css.This переопределяет значения по умолчанию для классов значка.

.ui-icon-home { 
    background: url("home.png") no-repeat 50% 50% !important;  
    -moz-border-radius:0px; 
    -webkit-border-radius:0px; 
    border-radius:0px; 
    width:22px; 
    height:22px; 
    margin-top:-12px;/*Adjust this value to position the icon*/ 
}

источник

2012-02-19 16:32:19 user700284

, если вы хотите изменить размер до 32x32 для низкой resoultion и 80x80 для экранов HD. это не работает. вам нужно ваше предложение – yokks

Используйте медиа-запрос, например, экран '@media и (min-width: 32em) {'. – untill

У меня была та же проблема. Я установил его с помощью следующего кода:

.ui-icon { 
    background-color: transparent; 
    width: 22px; 
    height: 22px; 
}

Он снимает черную тень круг за иконами и делает его 22px высота/ширина.

Удачи.

источник

2012-05-09 08:20:53

для иконок в два раза большие, как обычного размера, используйте:

.ui-icon-custom::after { 
    background-image: url("custom.svg"); 
} 
.big-icon { 
    padding-top: 4em; 
    height: 6em; 
} 
.big-icon::after { 
    margin-left: -1.3em; 
    width: 2.6em; 
    height: 2.6em; 
    background-size: 2.6em 2.6em; 
    border-radius: 0; 
}

где custom.svg является пользовательский значок. Не забудьте добавить к вашей команде два класса: big-icon и ui-icon-custom.

источник

2015-05-19 10:23:28 untill

JQuery размер мобильной навигации значок бар

ответ

Смежные вопросы