Css 字形图标更改大小

我试图在一个网页上安排一些图标，当点击时，这些图标最终会包含链接。我希望当光标碰到它们时，它们会改变颜色，但我不明白为什么在我目前的尝试中，它们的大小都会发生如此大的变化。（我不介意他们稍微改变一下尺寸）。请看小提琴

通过添加

填充

可以修改处于悬停状态的元素的大小。通过设置偏移的相对位置来更正偏移：

#glyphicon:hover, .glyphicon:focus {
    color: #FFFFFF;
    background-color: #808080;
    padding: 20px;
    position:relative;
    top:-20px;
}

---

这会让你走的。您仍然需要更正

元素的位置，与上述操作并行。

您正在悬停上添加一个填充。。。还有一件事，id在页面加载中只能使用一次，所以请不要在每个页面上都使用

id=“glyphicon”

。这是无效的。它仍然会向下推文本。如果使用

位置：相对原始空间仍然被占用。@Pinki:是的，请参阅我的最后一段。@knittl这仍然会使它周围的div变大。我不认为这是一个好的方法，它下面的部分必须由浏览器重新绘制，只是为了添加填充？为什么你不在悬停前加上传球，然后只改变背景颜色和颜色？@Pinki：如果你有不同的解决方案，你认为解决问题更好，你可以随时提供自己的答案。我提供了我的，指出了警告。我确实写了我的解决方案。。。但我写的不是填充，而是传递。。。