question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

formBuilder's icons conflict with other icon fonts

See original GitHub issue

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)

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:1
  • Comments:7

github_iconTop GitHub Comments

3reactions
johndeencommented, Jul 5, 2019

@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
2reactions
ppsheincommented, Jan 14, 2020

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";
  }
Read more comments on GitHub >

github_iconTop Results From Across the Web

Font Awsome icon conflicts (invisible “delete” button)
Font Awsome icon conflicts (invisible “delete” button) ... Either there is a way to avoid conflict with other plugins using “Font Awesome” as...
Read more >
Icon Font - jQuery formBuilder
formBuilder uses an icon font generated with Fontello. ... open and create a new session on fontello.com where you can choose new icons...
Read more >
Conflict between Bootstrap and other font icons - Stack Overflow
I am using bootstrap3 in my project. Now i want to use some font-icons besides with it's core icons. First I tried Font...
Read more >
font-display is Incompatible with Icon Fonts—zachleat.com
Delivering Octicons with SVG on the GitHub Blog. ... Icon Fonts by Chris Coyier on CSS Tricks; Have another? Pass it along!
Read more >
FormBuilder client API - SmartPlant Foundation - IM Update 36 - Help
The FormBuilder client API is used to open the Form Builder feature where you can customize existing ... Attach master file which references...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found