Using fontawesome icons in database fields

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.

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!

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.