Сделайте Glyphicon-plus slim и не меняйте цвет при наведении - PullRequest
Новая
       48

Сделайте Glyphicon-plus slim и не меняйте цвет при наведении

0 голосов
/ 25 мая 2018

Есть ли способ сделать глификон-плюс меньше?Я пытался glyphicon-plus, но +, который я получаю, толстый.Фрагмент кода:

<a>{href: "#/agencies/new", class: 'btn btnadd pull-right'} <i class="glyphicon glyphicon-plus"></i></a>

Мой стиль кода: 

.btnadd {
border: none;
color: white;
height: 50px;
width: 50px;
border-radius: 50%;
position: fixed;
bottom: 5%;
right: 1%;
background: #60BBEA !important;
padding: 12px;
font-size: 20px;

}

Есть ли способ сделать плюс меньше.Также значок «Плюс» имеет белый цвет, но при наведении он становится черным.Любой способ предотвратить изменение цвета?

Ответы [ 3 ]

0 голосов
/ 25 мая 2018

Используйте размер шрифта, чтобы сделать плюс меньше или больше.Настройте номер для ваших нужд.

.btnadd i {
    font-size: 14px;
}

Использование: hover для перезаписи поведения при наведении по умолчанию. 

.btnadd i:hover {
    color: white;
}
0 голосов
/ 25 мая 2018

Чтобы сделать значок плюса тонким, попробуйте добавить следующий стиль CSS в glyphicon-plus

.glyphicon-plus {
     font-family: none !important;
}

Что касается предотвращения изменения цвета галочки при наведении, вы можете просто установить :hover дляэлемент будет таким же?По сути, при наведении курсора на элемент он не будет выглядеть так, как будто он изменился. 

.btnadd:hover {
    color: #fff !important;
}
0 голосов
/ 25 мая 2018

Заменить ниже стиль 

.btnadd {
    border: none;
    color: white;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 5%;
    right: 1%;
    background: #60BBEA !important;
    padding: 12px;
    font-size: 14px;
}
.btnadd:hover{
    color: #fff;
}

.btnadd i{
    top: 5px;
}

Уменьшить размер шрифта в .btnadd и изменить цвет при наведении

...