为材质图标添加背景答案

【问题标题】：Add a background to a material icon为材质图标添加背景
【发布时间】：2022-01-24 16:50:17
【问题描述】：

我有以下材料图标代码。但是，我想添加白色背景以使其具有更多对比度。任何想法如何添加背景？

<a id="lnk_quick_print" href="javascript:;" title="Quick Print" onclick="window.print();" class="material-icons icon noQuickPrint" style="font-size:14px;margin-left: 8px;">print</a>

【问题讨论】：

添加 background: white 和 border-radius: 3px CSS 属性？

标签： html css material-ui material-design

【解决方案1】：

只需在样式中添加background-color:white

<a id="lnk_quick_print" href="javascript:;" title="Quick Print" onclick="window.print();" class="material-icons icon noQuickPrint" style="font-size:14px;background-color:white;margin-left: 8px;">print</a>

【讨论】：

这很好用。我唯一需要添加的是一个边界半径来稍微圆角。

【解决方案2】：

您对此有何看法：

<a id="lnk_quick_print" href="javascript:;" title="Quick Print" onclick="window.print();" class="material-icons icon noQuickPrint" style="background: white; padding: 5px 10px; box-shadow: 0 0 10px rgba(0,0,0,0.4); border-radius: 10px; font-size:14px;margin-left: 8px;">print</a>

【讨论】：

这看起来是个不错的解决方案。我刚刚尝试了发布的第一个，它起作用了；所以，与它一起运行。

【解决方案3】：

使用这个

<a id="lnk_quick_print" href="javascript:;" title="Quick Print" onclick="window.print();" class="material-icons icon noQuickPrint" style="font-size:24px;margin-left: 8px;background:white;padding:5px 6px">print</a>

【讨论】：

与其他非常相似。谢谢。