如何确定按钮内图标的不透明度（不影响整个按钮）？

Question

我可能没有用标题准确地描述问题，但是在这里更容易解释：

我有一个按钮，其中包含一个图标图像。我需要摆脱该图标周围的灰色框，并保留图标本身以及按钮功能。我为按钮分配了第二个类，称为“ nogray”，然后在样式表中将不透明度设置为0。

但是，它摆脱了整个按钮以及带有橙色的小垃圾桶图标，我需要看到它。本质上，我需要按钮具有相同的功能，只是带有橙色图标而没有灰色框。在此屏幕快照中，您可以看到每个公告顶部的按钮。

这是公告视图中的按钮代码：

 <button class ="remove-card nogray" id="@item.BulletinId" type="button"><i 
 class="fa fa-trash"></i></button>

这是按钮的css：

i.fa.fa-trash::before {
content: "\f1f8";


}
.remove-card.nogray {
opacity:0;
}

（i.fa.fa-trash :: before定位到垃圾桶图标，.remove-card.nogray定位到外部灰色区域。但是，我怀疑后者将整个按钮作为目标，因为将不透明度设置为0会同时影响灰色区域和图标。

我将如何调整按钮代码，以便仅对于灰色而不是图标，不透明度为0？我已经尝试过逐个更改代码元素的顺序，但是很多都是猜测，因为这是团队合作的结果，而且我没有亲自编写按钮代码。如果这是一个无法回答的问题，我也想提前道歉；如果您需要了解一些详细信息，请告诉我，我将对其进行编辑以包括在内。

非常感谢您的任何建议！

Answer 1

我意识到我瞄准的是CSS中错误的代码行。有一个ActionLink被队友注释掉了，我将其中的类分配给了我的原始按钮代码，并能够以这种方式定位按钮。