使 Glyphicon-plus 纤薄且颜色在悬停时不会改变答案

【问题标题】：Make a Glyphicon-plus slim and color not change on hover使 Glyphicon-plus 纤薄且颜色在悬停时不会改变
【发布时间】：2018-11-04 17:52:29
【问题描述】：

有没有办法让 glyphicon-plus 更小？我试过glyphicon-plus 但我得到的+ 很厚。代码sn-p是

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

我的风格是sn-p

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

}

有什么办法可以让加号变小。加号图标也是白色的，但当悬停时，它会变成黑色。有什么方法可以防止它改变颜色？

【问题讨论】：

标签： html css twitter-bootstrap icons glyphicons

【解决方案1】：

替换下面的样式

.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 中的字体大小并在悬停时更改颜色

【讨论】：

在悬停的情况下工作。但是，我想让“加号”更苗条一些。默认情况下它太厚了。有什么方法可以吗？
当更苗条时，我的意思是像工厂添加按钮
有些字形默认是粗的，对于光滑的图标你需要使用其他图标
当我将 font-family 设为“Material Icons”时它起作用了

【解决方案2】：

使用 font-size 使加号变小或变大。根据您的需要调整数字。

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

使用 :hover 覆盖默认的悬停行为。

.btnadd i:hover {
    color: white;
}

【讨论】：

不，我希望图标大小相同，但要更苗条，就像工厂图标一样
你可以试试 font-weight: 100;但如果图标只是以该宽度绘制，则您无法更改它。
当我将字体系列更改为“材料图标”时工作

【解决方案3】：

要使加号图标变细，请尝试将以下 CSS 样式添加到 glyphicon-plus

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

至于防止悬停时刻度线的颜色发生变化，您可以将元素的:hover设置为相同吗？因此，本质上，当将鼠标悬停在元素上时，它看起来不会发生变化。

.btnadd:hover {
    color: #fff !important;
}

【讨论】：