user1149620 user1149620 - 2 years ago 169
CSS Question

MaterializeCSS Using Icon As FAB Button [FeatureDiscovery]

On the FeatureDiscovery page they have a FAB button in the bottom right hand corner ( I would like to replace this button with a .png image - a circular image like this: Is this possible at all?

If so would you be able to guide me into how to do it please?


Answer Source

I made this fiddle for you. Do you mean something like this?

#icon {
  z-index: 10;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  bottom: 5%;
  right: 5%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  cursor: pointer;

.fab-img {
  width: 100%;
  height: 80px;
<div id="icon">
  <div id="wrapper">
    <img class="fab-img" src=""/>

You can also replace the <i class="material-icons">menu</i> with the img tag included in the snippet

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download