Using Fontawesome Icons as CSS Pseudo Elements for CFF Button Field

  • Resolved eberkland

    (@eberkland)


    2 months ago

    Is this possible? Everything works but the icon. I have my font awesome js script in my header.

    My CSS works https://codepen.io/eberkland/pen/JjQQBwo

    I am using web font method with pseudo elments.

    Code in the cff form editor works, except for icon not showing up

    /* New Row BUTTON Style */ fbuilder .newrow-btn input[type=button]{

    background: #E2e2e2 !important;
    padding: 0.6em 1.3em !important;
    min-height:60px !important;
    width:100% !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    border: 1px solid #381700 !important;
    border-radius: 0.5em 0.1em 0.1em 0.5em !important;
    box-shadow: 0.01em 0.01em;
    box-sizing:border-box;
    cursor: pointer;
    color:#381700 !important;
    text-align:left;
    text-transform:uppercase;
    letter-spacing:1px
    } fbuilder .newrow-btn input[type=button]:hover {

    transform: translate(-0.03em, -0.03em);
    box-shadow: 0.05em 0.05em;
    background:#c2d1bc !important;
    color: #2a3c24 !important
    } fbuilder .newrow-btn input[type=button]:active {

    transform: translate(0.05em, 0.05em);
    box-shadow: 0.01em 0.01em;
    } fbuilder .promo-btn input[type=button]{

    background: #E2e2e2 !important;
    padding: 0 1em !important;
    min-height:60px !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    border: 1px solid #381700 !important;
    border-radius: 0.1em 0.1em 0.1em 0.1em !important;
    box-shadow: 0.01em 0.01em !important;
    box-sizing:border-box;
    cursor: pointer;
    color:#381700 !important;
    text-transform:uppercase;
    letter-spacing:1px;
    } fbuilder .promo-btn input[type=button]:hover {

    transform: translate(-0.03em, -0.03em) !important;
    box-shadow: 0.05em 0.05em !important;
    background:#fee2d5 !important;
    color:#cc5500 !important
    } fbuilder .promo-btn input[type=button]:active {

    transform: translate(0.05em, 0.05em) !important;
    box-shadow: 0.01em 0.01em !important;
    }

    /* Step 1: Common Properties
    These styles are required to make icons render reliably */ fbuilder .promo-btn .icon input[type=button]::before {

    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    }

    /* an example rule targeting any element with the "account" class to render fa-user icon in the Solid style */ fbuilder .promo-btn input[type=button]::before {

    font: var(--fa-font-brands);
    content: '\f288';
    line-height:.8;
    font-size:28px;
    vertical-align:middle
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @eberkland

    Thank you very much for using our plugin. Please provide the link to the page containing the form to check how the styles affect the form elements.

    Best regards.

    Thread Starter eberkland

    (@eberkland)

    This is a private site, if I send login credentials will they be hidden?

    Plugin Author codepeople

    (@codepeople)

    Hello @eberkland

    I’m sorry, but you should not provide any credentials in forums.

    I recommend that you create a basic form, as a proof of concept, on a public and accessible website.

    Best regards.

    Plugin Author codepeople

    (@codepeople)

    Hello @eberkland ,

    Due to the number of days you have not added any posts to the support thread, I assume you have found an answer to your issue. We will proceed to mark your thread as resolved.

    Best regards.

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