Materialize：更改浮动操作按钮设计/图像

Question

我正在尝试将 Whatsapp 图标添加到我网页的浮动操作按钮，但我只能使用 materialize 的图标，有什么方法可以更改 image/design自定义圆形 png 图像的按钮？

提前致谢！

巴勃罗

Answer 1

很简单。将 i 标签替换为 img:

<a class="btn-floating btn-large red">
    <img src="https://via.placeholder.com/56" alt="Button Image">
</a>

这将覆盖整个 FAB - 我使用的占位符与按钮的尺寸完全相同（56 像素 x 56 像素）。如果你想将图像缩小到默认图标的大小，将其设置为圆形等，它是：

a.btn-floating img {
  padding: 12px;
  border-radius: 50%;
  width:100%;
}

Materialize: Change floating action button design / image