Button Style (Value)
-
I need to style the “value” in the button settings. It looks like it doesn’t accept html. I am trying to add an icon. I have tried with font-awesome, google material symbols, svg. Usually, this method works, but I am not having any luck with CFF. Here is an example:
#fbuilder .deletebtn input[type=button] {
display: inline-block;
width: 100%;
text-decoration: none;
font-size: 14px;
line-height: 2;
min-height: 34px;
padding: 5px 30px;
cursor: pointer;
border-width: 1px;
border-style: solid;
-webkit-appearance: none;
border-radius: 3px;
white-space: nowrap;
box-sizing: border-box;
vertical-align: baseline;
background: #007cba;
border-color: #007cba;
color: #fff;
text-shadow: none;
position: relative; /* Required for pseudo-element positioning */
}
#fbuilder .deletebtn input[type=button]::before {
content: '';
display: inline-block;
width: 16px; /* Icon width */
height: 16px; /* Icon height */
margin-right: 8px; /* Space between icon and text */
vertical-align: middle;
background: url('data:image/svg+xml,%3Csvg xmlns="https://www.w3.org/2000/svg" fill="white" viewBox="0 0 24 24" width="24" height="24"%3E%3Cpath d="M3 6h18v2H3V6zm2 3h14v13H5V9zm4 3v7h2v-7H9zm4 0v7h2v-7h-2zM7 4h10v2H7V4z"/%3E%3C/svg%3E') no-repeat center;
background-size: contain; /* Ensures the SVG scales properly */
}
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
- You must be logged in to reply to this topic.