formBuilder's icons conflict with other icon fonts

Description:

I’m already using another icon font in my project in the css class space icon-*. Since installing formBuilder, the icons are broken, because formBuilder overrides that css class space with its own icons. How can i customize the namespace formBuilder uses?

Environment Details:

• formBuilder Version: 3.1.3
• Browser: doesnt matter
• OS: doesnt matter

Expected Behavior

fb should have a configurable option to give its css namespace for icons its own name?

Actual Behavior

Broken icons in the global css space

Steps to Reproduce

example: use formBuilder together with Font IcoMoon which uses icon-* css classes.

Screenshot - (optional)

[johndeen]

@burgoyne Thankyou for quick reply. Sorry i wasn’t able to understand but i managed to solve it:

1. Created fontello files and changed the prefix.
2. Used embedded css file from fontello and replaced css in the formbuilder.min.js.
3. updated prefex in the js file accordingly. Attaching beautified version with changes. formBuilder-FontIssue-TempFix.zip

[ppshein]

I’ve fixed how to make it happen by adding following code snippet into project. That’s to define formbuilder-icons font will be used in specific area.

  .form-wrap.form-builder .frmb-control li::before {
    font-family: "formbuilder-icons", fb-icons;
  }

  .form-wrap.form-builder [class^=icon-]:before, .form-wrap.form-builder [class*=" icon-"]:before {
    font-family: "formbuilder-icons", fb-icons;
  }

For the rest of whole project, we could be able to define to use original font like that

  .nav-icon [class^=nav-icon]:before, .nav [class*=" nav-icon"]:before {
    font-family: "simple-line-icons";
  }