让字体容器在悬停时变大（javascript）

我有很多按钮的FA图标。我想让它们在盘旋时一次变大一个。其他人因此会稍微向两边移动。我考虑使用javascript来实现这一点，并尝试了以下方法，但没有成功：

功能悬停图标（classnm）{
css（{高度：'+=10%，宽度：'+=10%}）；
}
功能无切换图标（classnm）{
css（{高度：'+=10%，宽度：'+=10%}）；
}

#主图标{
位置：固定；
底部：20px；
右：193px；
文本对齐：居中；
}
#主要图标i{
显示：内联块；
边际上限：0；
左边距：-3px；
高度：30px；
宽度：50px；
填充：10px；
颜色：{color:Main icon}；
背景：{颜色：主图标背景}；
文本转换：大写；
字体大小：15px；
线高：30px；
-webkit过渡：全部.7秒轻松；
-moz过渡：所有.7秒轻松；
-o型过渡：所有。7秒缓解；
过渡：全部。7秒轻松；
}  
#主要图标一：悬停{
颜色：{color:Hover}；
背景：{颜色：主图标}；
-webkit过渡：全部.7秒轻松；
-moz过渡：所有.7秒轻松；
-o型过渡：所有。7秒缓解；
过渡：全部。7秒轻松；
}

---

尝试变换高度和宽度：

#mainicons i:hover {
  color:{color:Hover};
  background:{color:Main icon};
  transform: scale(1.1);
}

---

嘿，只是一个简单的问题，这确实有效，但图标在旁边的其他图标上。。我在另一件事上用javascript实现了这一点（下一步和后退按钮），因此当一个元素变大时，元素会自行移动。。我不知道这是否有意义这是javascript效果的关键