APEX: How to create a select list with FontAwesome icons

Hi,

Today I needed to create an APEX select list input in order to let users choose its own icon from FontAwesome gallery, like this one:

I first tried to insert span tag with font-awesome classes, but APEX scapes HTML tags and it didn’t work. So finally I read at Patrick Wolf’s blog one possible solution:

http://www.inside-oracle-apex.com/add-colors-or-images-to-your-select-list/

He applies a modification at select list option tag’s using JavaScript. So finally I used some part of its solution:

1) Create a Select list item, named for instance P1_ITEM, containg font-awesome unicode codes at description. For example:

Download complete select for version 4.6.1 (fa_view_461.sql)

You can see font-awesome full unicode list here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

2) Under item properties -> Advanced -> Custom Attributes, specify:

style=”font-family: ‘FontAwesome’, Helvetica;

3) Finally we unescape unicode characters which will be scaped from APEX select list. In order to do that we need a Dynamic Action. We create a Dynamic Action on “Page Load” which executes following jquery (replacing P1_ITEM which your select list name):

 

 

So that’s all! Enjoy!

UPDATE 2016/11/25:

I attach a view sample to retrieve font-awesome ANSI codes:

Download view: v_font_awesome

I’ve also noticed at  APEX 5.0.3 version it’s required to call Javascript replace twice to make it work properly, so it sould be:

Tags: , ,

10 Responses to “APEX: How to create a select list with FontAwesome icons”

  1. Omar Mohammad Sawalhah 23/03/2016 at 11:34 #

    Hi,
    I need the list please as excel or table dump, I don’t want to enter all the icons again,
    I would appreciate if you can share.

    Omar

  2. josepcoves 04/04/2016 at 16:49 #

    Hi,

    See following post:

    http://stackoverflow.com/questions/27992992/i-need-list-of-all-class-name-of-font-awesome

    You can create a view returning values:

    [“fa-adjust”, “fa-adn”, “fa-align-center”, “fa-align-justify”, “fa-align-left”, …, “fa-youtube-play”, “fa-youtube-square”]

  3. Omar Mohammad Sawalhah 10/04/2016 at 00:14 #

    Thanks for the list,
    But I can see that you have a unicode for each icon, as you described in your post.

    Regards,
    Omar

  4. josepcoves 13/04/2016 at 15:44 #

    Yes, it’s true. I’ll update post with a sample.

  5. josepcoves 13/04/2016 at 15:54 #

    Hi Omar,

    Here you have an SQL sample:

    http://www.relational.es/blog/wp-content/uploads/2015/07/fa_view_461.sql_.txt

    Hope it helps.

  6. Omar Mohammad Sawalhah 16/04/2016 at 13:24 #

    Hi Jose,
    Many Thanks.

    Regards,
    Omar

  7. Luis 24/11/2016 at 20:43 #

    I’ve tryed to create the page item as Select List with your query in APEX 5.0.2 but isn’t possible. The query is too large.
    I want to create a table with your query but i don’t found what value i need use instead of &

    Regards.

    • josepcoves 25/11/2016 at 09:42 #

      Hi Luis,

      I updated entry with the code of a VIEW which returns font awesome ansii codes. Hope this helps!

  8. arvind singh 21/12/2016 at 07:45 #

    can i use custom image in desktop navigation menu in side navigation menu.on which place we use font awesome icons.I want to change font color of list entry can it possible.

    • josepcoves 21/12/2016 at 10:31 #

      Hi,

      With Universal Theme you cannot use custom items by default, you can only use font awesome. In case you wan to do so, you should modify page template so that it uses tags instead of font awesome.

      To change color you should use Theme Roller.

Leave a Reply

APEX: How to create a select list with FontAwesome icons

Hi,

Today I needed to create an APEX select list input in order to let users choose its own icon from FontAwesome gallery, like this one:

I first tried to insert span tag with font-awesome classes, but APEX scapes HTML tags and it didn’t work. So finally I read at Patrick Wolf’s blog one possible solution:

http://www.inside-oracle-apex.com/add-colors-or-images-to-your-select-list/

He applies a modification at select list option tag’s using JavaScript. So finally I used some part of its solution:

1) Create a Select list item, named for instance P1_ITEM, containg font-awesome unicode codes at description. For example:

Download complete select for version 4.6.1 (fa_view_461.sql)

You can see font-awesome full unicode list here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

2) Under item properties -> Advanced -> Custom Attributes, specify:

style=”font-family: ‘FontAwesome’, Helvetica;

3) Finally we unescape unicode characters which will be scaped from APEX select list. In order to do that we need a Dynamic Action. We create a Dynamic Action on “Page Load” which executes following jquery (replacing P1_ITEM which your select list name):

 

 

So that’s all! Enjoy!

No comments yet.

Leave a Reply

APEX: How to create a select list with FontAwesome icons

Hi,

Today I needed to create an APEX select list input in order to let users choose its own icon from FontAwesome gallery, like this one:

I first tried to insert span tag with font-awesome classes, but APEX scapes HTML tags and it didn’t work. So finally I read at Patrick Wolf’s blog one possible solution:

http://www.inside-oracle-apex.com/add-colors-or-images-to-your-select-list/

He applies a modification at select list option tag’s using JavaScript. So finally I used some part of its solution:

1) Create a Select list item, named for instance P1_ITEM, containg font-awesome unicode codes at description. For example:

Download complete select for version 4.6.1 (fa_view_461.sql)

You can see font-awesome full unicode list here:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

2) Under item properties -> Advanced -> Custom Attributes, specify:

style=”font-family: ‘FontAwesome’, Helvetica;

3) Finally we unescape unicode characters which will be scaped from APEX select list. In order to do that we need a Dynamic Action. We create a Dynamic Action on “Page Load” which executes following jquery (replacing P1_ITEM which your select list name):

 

 

So that’s all! Enjoy!

No comments yet.

Leave a Reply