Forum Stats

  • 3,782,912 Users
  • 2,254,708 Discussions
  • 7,880,223 Comments

Discussions

Categories

FontAwesome integration with JDeveloper 12.2.13 for Icon, hoverIcon, depressedIcon and disabledIcon

Bilal
Bilal Member Posts: 503 Bronze Badge
edited Sep 24, 2020 2:58AM in JDeveloper and ADF

Hi All,

Oracle Jdeveloper 12.2.13.

I am finding my way around the FontAwesome integration to see if it can fully be utilised for all icons-related needs in the Oracle ADF application.

Thanks to authors of the blogs shared below where I was able to learn its integration.

  1. https://blogs.oracle.com/shay/leveraging-icon-fonts-font-awesome-in-oracle-adf-500-new-icons-for-your-app
  2. http://www.awasthiashish.com/2018/11/use-font-awesome-5-icons-in-oracle-adf-application.html

I am using the approach mentioned in blog 2 for the FontAwesome library integration which uses the af:script tab, instead of downloading it and copying it in the Skins folder. See the code below:

<af:resource type="css" source="https://use.fontawesome.com/releases/v5.14.0/css/all.css"/>

I have the following code snippet for a button that works fine except when mouse hover the icon disappears. Besides, it is quite difficult to align the icon and button text in the middle:

<af:button id="b3" styleClass="fas fa-toggle-off fa-2x"/>

Surprisingly, when I use FontAwesome classes into icon-specific properties of the ADF button but it is not working. The output shows a small rectangle which means no icon is found during page rendering.

<af:button id="b3" icon="fas fa-toggle-off fa-2x"/>

Is there a way to use FontAwesome icons with Icon, hoverIcon, depressedIcon and disabledIcon properties of the ADF components like button, showDetailItem, etc?

I will greatly appreciate your guidance.

Many Thanks and

Kind Regards,

Bilal

· Share on TwitterShare on Facebook

Best Answer

«1

Answers

  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,792 Red Diamond
    edited Sep 20, 2020 7:29AM

    Sure there is. In the first link you shared the solution is outlined.

    Putting css in the icon property can't work. There you need to specify an icon file, not css as you did.

    The best solution would be to copy the FontAwesome css to the right ADF skin seletors.

    Timo

    · Share on TwitterShare on Facebook
  • dvohra21
    dvohra21 Member Posts: 14,324 Gold Crown
    edited Sep 20, 2020 6:44PM

      FontAwesome is a CSS styles library, not actual icon images that could be used in icon attribute.

    · Share on TwitterShare on Facebook
  • Bilal
    Bilal Member Posts: 503 Bronze Badge
    edited Sep 22, 2020 5:34PM

    Hi Timo,

    Thanks for the reply.

    I configured FontAwesome locally inside Skins folders as suggested in the first approach but still couldn't figure out using Font Icons using the icon properties.

    I tried the following CSS definitions: 

    .TestFontIconButton af|button::link:active {    content: "\f065";    font-family: FontAwesome;      font-size:x-large;}.TestFontIconButton af|button::link:hover{    content: "\f065";    font-family: FontAwesome;      font-size:x-large;}.TestFontIconButton af|button::link:depressed {    content: "\f065";    font-family: FontAwesome;      font-size:x-large;}

    Any suggestions on what is wrong with this code?

    Any help will be greatly appreciated.

    Many Thanks and

    Kind Regards,

    Bilal

    · Share on TwitterShare on Facebook
  • dvohra21
    dvohra21 Member Posts: 14,324 Gold Crown
    edited Sep 22, 2020 11:44PM

    As mentioned before, these aren't icons at all; not icon image files. These are just CSS styles, and should be applied as style class, not with icon attribute.

    · Share on TwitterShare on Facebook
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,792 Red Diamond
    edited Sep 23, 2020 2:42AM

    From what I see I can only say that there are some parts missing (which you might have, but did not disclose here). As usual, a full working sample would help here.

    Have you tried the exact usage Shay showed in his video?

    If this runs you know that the FontAwsome integration is working. The problem then is your skin or your selectors.

    Timo

    · Share on TwitterShare on Facebook
  • Bilal
    Bilal Member Posts: 503 Bronze Badge
    edited Sep 23, 2020 4:16AM

    Hey Dvohra,

    You are right that font awesome are not icons but what I believe that there will be a workaround to use CSS to populate icon-related propoerties of the ADF components using CSS selector.

    Thanks for the suggestions. I appreciate your input.

    Many Thanks and

    Kind Regards,

    Bilal

    · Share on TwitterShare on Facebook
  • Bilal
    Bilal Member Posts: 503 Bronze Badge
    edited Sep 23, 2020 5:56AM

    Hi Timo,

    I created a sample ADF application with the necessary resources to experiment with FontAwesome integration. You can download it from https://github.com/bilalcodehub/FontAwesomeIntegrationWS.

    I want to apply the font icons on the button icon properties as well as that of the panel drawer's showdetailitem. When you run the application, you will see the following user interface.

    Screen Shot 2020-09-23 at 10.45.00.png

    The button next to Rollup label is using Font Awesome Icon. It has conditional formatting and can be toggled on and off which looks incredible.

    It would be great to see if icons for Show trends button and panelDrawer's showDetailItem can be read from the font awesome.

    You are right about the Skin selector. It might be the right selector which I couldn't figure out yet.

    Any help will be much appreciated.

    Many Thanks and

    Kind Regards,

    Bilal

    · Share on TwitterShare on Facebook
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,792 Red Diamond
    edited Sep 24, 2020 2:58AM

    OK, the FontAwesome integration in the app works.

    I'll need to make some tests if it'S possible to inject the right css to the panelDrawer icon. This will take some time.

    Timo

    · Share on TwitterShare on Facebook
  • Bilal
    Bilal Member Posts: 503 Bronze Badge

    Hey Timo,


    You would be quite busy but I am wondering if you get any opportunity of working on the application?


    Thanks in advance

    · Share on TwitterShare on Facebook
  • Timo Hahn
    Timo Hahn Senior Principal Technical Consultant - Oracle ACE Director Member, Moderator Posts: 37,792 Red Diamond

    Sorry, no. It's still on my list.

    I can tell that there isn't an easy solution for the panelTabbed as the tabs only display icons, and FontAwesome is css and not an icon. However, I hope to find a solution but no guarantee.

    Timo

    · Share on TwitterShare on Facebook