Using fontawesome icons in database fields

  • Great plugin. Thank you. It is capable of doing everything I want it to so far. I am having some trouble when trying to use fontawesome (https://fontawesome.io/) icons in database fields. When I enter “<i class=”fa fa-flask” aria-hidden=”true”></i>” (code for the font icon) and text “Analyze/Evaluate” in the Values field in a Multiselect checkbox form element, it shows up as “Analyze/Evaluate” /> Analyze/Evaluate” with the icon in the middle (in the signup form). You can view it here: https://www.eachandeveryjob.com/add-a-job/. Thank you in advance for any help you can offer.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author xnau webdesign

    (@xnau)

    Tags are stripped out of the titles, so you won’t be able to do it that way.

    You can do something like this with CSS, although it’s a bit complicated. First, get your icon on the screen somewhere, it doesn’t matter where. Once you do that, use the browser developer’s tools to inspect the CSS that is used to show the icon on your test element. There will be two rules: one for the container, and one for the content of the container. You can apply the exact same rules to your dropdown option using a selector like this:

    Let’s say the “value” of the option is “AL”…use a selector like this to place your icon:

    option[value="AL"] for the container and
    option[value="AL"]::after for the content of the container

    and for forth for all the ones you want to place icons on.

    Thread Starter jybarra

    (@jybarra)

    Here is part of what I see when I inspect the style of my test icon:

    .fa-bar-chart-o:before, .fa-bar-chart:before {
    content: “?”;
    }
    .fa-bar-chart-o:before, .fa-bar-chart:before {
    content: “?”;
    }
    .fa-bar-chart-o:before, .fa-bar-chart:before {
    content: “?”;
    }
    *:after, *:before {
    box-sizing: border-box;
    }
    *:after, *:before {
    box-sizing: border-box;
    }

    Is this what I’m looking for? If so, what do I do with it? Do I put it in the “Values” box of my form element?

    Sorry, kind of a noob. ?? But thanks so much for your help!

    Plugin Author xnau webdesign

    (@xnau)

    There will be more than that…you’re also looking for the rule on the container, which will give it the FontAwesome font.

    So… you have

    .fa-bar-chart-o:before, .fa-bar-chart:before {
content: “?”;
}

    that will become something like: ( i got it wrong before…use this example)

    option[value="AL"]:before {
content: “?”;
}

    You have to copy it from the inspector because that square character is actually the icon character.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Using fontawesome icons in database fields’ is closed to new replies.