• Resolved eberkland

    (@eberkland)


    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)
  • Plugin Author CodePeople2

    (@codepeople2)

    Hello @eberkland

    You cannot use ::before if the tag does not have the structure <tag></tag> , so, you cannot apply it to a <input> tag.

    If you want to create a button with a custom structure and design, you must enter its tags directly in the content of an “HTML Content” field, and in this case, you can insert the button as <button type="button">The text</button>

    Best regards.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.