For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!
When we try to take a preauthorization on an American Express card, the following message appears:
’WHEN-NEW-FORM-INSTANCE trigger raised unhandled exception
The payment machine is linked to Opera and works perfectly with Mastercard and Visa
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;}
.TestFontIconButton af|button::link:active {
content: "\f065";
font-family: FontAwesome;
font-size:x-large;
}
.TestFontIconButton af|button::link:hover{
.TestFontIconButton af|button::link:depressed {
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.
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.
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.
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.
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
Bilal, I finally found some time to look into this issue. The summary is that I did manage to make some things work. However, af:panelDrawer, I did not :( The problem is that this component can be skinned only by the drawer itself, but not by each showDetailItem. This means that you can show a FontAwesome icon on each drawer, but they all show the same. The only thing you can change is the URL to an icon to show. The URL can#t be used to show a FontAwesome icon. The only thing you can do is address the drawer directly by specifying the detailed path, but I don't call that a solution as it isn't portable. You have to know the drawers' generated ids and change the skin by specifying them in the skin. This isn't a good idea as you have to do it every time you use it. In this case, using an icon is easier and better. You can look at what I did accomplish at 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.