SQLcl: MCP Server & SQL Prompt

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

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

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

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.

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

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

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.

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

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

Hey Timo,

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

Thanks in advance

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

Hi Timo,
Thanks. This is a lot of nice work.
You demonstrated the use of icons on buttons. Did you try something to change the depressedIcon, hoverIcon and disabledIcon properties for ADF button component? Can these properties be changed using CSS?
Many Thanks and
Kind Regards,
Bilal

Predefined style selectors could be used; refer https://docs.oracle.com/middleware/1221/adf/tag-reference-skin-selectors/toc.htm#Component_Group__Button

@dvohra21 Do you ever read a question and the already present answers?
If the skin selectors work, how about you tell us how?

Haven't tested but the following selectors could be used. Global and component Style selectors are available for hover,depressed,disabled state.
.AFButtonForegroundHover:alias {color:#035D5C;}
.AFButtonForegroundDepressed:alias {color:Purple;}
.AFButtonForegroundDisabled:alias {color:#333333;}

These styles are applied to the button, and not to any icons.

af|button:hover {
foreground-color:Purple;
}

af|button:depressed {
foreground-color:#035D5C;
}

af|button:disabled {
foreground-color:#333333;
}

Even after asking you to read the question, you don't :(
The question is about FontAwesone integration not some styles to skin the button itself. If you don't know anything about hte topic, don't answer. Copying something from the doc without detailed description how this should help solving hte problem isn't helpful.

By the way the style code snippet isn't copied. I know the question is about FontAwesone integration, but FontAwesone could be mixed with ADF Style selectors.

undefined (0 Bytes)Bilal, adding a FontAwesome icon to the button in normla, hover isn't problematic. You can add this

.abc af|button::link:hover:before {
    content: "\f205";
    font-family: FontAwesome;
    text-align: center;
    font-size: xx-large;
    color: blue;
    vertical-align: middle;
    padding-right: 5px;
}


.abc af|button::link:before {
    content: "\f204";
    font-family: FontAwesome;
    text-align: center;
    font-size: xx-large;
    color: blue;
    vertical-align: middle;
    padding-right: 5px;
}

f
and add the style class 'abc' to a button to get
Screen record from 2020-11-15 17.00.07.mp4 (0 Bytes)However, this doesn't work for the depressed state. I'm not sure why, but from the look at the rendered HTML the hover state and the active state overrule the depressed state.
Timo

As long as you don't show us how to ntegrate FontAwesone with the selectors you posted, this answer isn't helpful.
So, where did you get the selectors?
I did not find any property ' foreground-color' at all.
Timo

Hi Timo,
Thanks a lot for the time and support.