размер значка панели навигации jquery для мобильных устройств

Question

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

<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 помещает значки в кружок и, таким образом, отображая только часть моего пользовательского значка, я хочу удалить кружок.

Answer 1

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

.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*/
}

Answer 2

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

 .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.

Answer 3

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

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

Он удаляет черный теневой круг за значками и делает его высотой / шириной 22 пикселя.

Удачи.

Answer 4

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

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