Best Of

While I appreciated the addition of more Font APEX icons in 21.1—especially the medical ones which could be useful in my current project—this was tinged with disappointment as closer examination revealed a number of problems with the new icons.

I unleashed my inner font geek to comprehensively review the new offerings on a page showing all of the relevant icons at standard and enlarged sizes.

The main issues noted are:

1. Lack of consistency with icon design patterns used in earlier releases (especially affecting file icons)
2. Violations of icon naming conventions established in earlier releases
3. Poor quality implementation of some designs
4. Questionable utility of some of the provided designs

I would consider 1 & 2 to be bugs. The differences between the 21.1 and earlier file icons are very obvious and they look incongruous and uneven when used together. A similar naming convention issue was previously raised for the 5.1 release and subsequently fixed.

3 & 4 are more subjective. I spot things like inconsistent stroke widths because I am obsessive about fonts. Others may neither notice nor care about things like this. However I would think that Oracle and its employees want APEX to look as good as it possibly can, and bug fixes and minor design tweaks can be implemented without affecting the meaning of the icons or their applicability to existing use cases.

File Icons

The problems that exist in the new file icons are my primary concern. The original Font APEX file icons are crisply designed, with a distinctive and quirky gap on the inner edge of their "dog-ear" corners. I really like them. We are using several of the existing file type icons in our current project, and specific CSV and prescription file icons would be welcome additions. However the new icon's inconsistencies in proportion and design are too obvious at fa-2x sizes to allow them to be used.

The problems can be seen by comparing the earlier fa-file-excel-o icon with the new fa-file-csv one:

Generally, the issues with the new file icons are:

• The distinctive Font APEX gap on the turned-down corner is absent.
• Wrong proportions: the aspect ratio is unnaturally squat, different from both the earlier icon style, and from the A4 and Letter document sizes that provide their real-world inspiration.
• Text in the small versions should be positioned higher, with the bottom edge line continuing to half the page width.
• Text in the large versions is not in a floating box like the original icons show their file extensions.
• Different lettering style—compare more angular "S" and "C" on original fa-file-excel-o and fa-file-word-o icons.

In case it isn't obvious: I am advocating that the new 21.1 file icons be revised to match the appearance of those provided in previous versions, not the other way round.

With respect to the lettering style I don't really care which is used (I think I actually prefer the new one—with the exception of the too-wide "N"), as long as it is consistent.

Looking at each of the new icons (view examples):

fa-file-brackets

• Missing gap in corner
• Squatter, less attractive proportions

fa-file-csv

• Missing gap in corner
• Wrong proportions
• Different lettering style—compare more angular "S" and "C" on original fa-file-excel-o and fa-file-word-o icons
• Text in small version should be positioned higher, and the bottom edge line should continue to half the width
• Text in large version is not in a floating box like other icons showing a file extension

fa-file-json

• Missing gap in corner
• Wrong proportions
• Different lettering style
• Text in small version should be positioned higher, and the bottom edge line should continue to half the width
• Text in large version is not in a floating box like other icons showing a file extension
• Text can be made narrower to fit the original icon size abd proportions by using the original angular style and a lower-case style reprensentation of the "N", with a semi-rounded top instead of a diagonal crossbar

fa-file-medical

• Missing gap in corner
• Wrong proportions

fa-file-prescription

• Missing gap in corner
• Wrong proportions
• Different lettering style

fa-file-signature

• Missing gap in corner
• Wrong proportions

Other New APEX 21.1 Icons

The rest of the new APEX 21.1 icons exhibit fewer generic issues (with the exception of the alarm clock series).

Again, considering each icon in turn (view examples):

fa-2d-mode

• Different lettering style—compare "D" in original fa-file-word-o icon
• Inconsistent line width on bow of "D"
• Not really sure what the use case for this is in an APEX context, but if it has one I would prefer to see a pictorial rather than textual representation

fa-3d-mode

• Different lettering style
• Inconsistent line width on bow of "D"
• Not really sure what the use case for this is in an APEX context, but if it has one I would prefer to see a pictorial rather than textual representation

fa-404

• Inconsistent element proportions between small and large versions (e.g. size and spacing of eyes)

fa-4k

• Inconsistent element proportions between small and large versions

fa-abacus

• Inconsistent design approach between small and large versions: large version adds more design elements at the same size rather than increasing the size of those used in the small icon (compare with fa-accessor icons below)

fa-accordion

• Don't think the meaning of this is particularly clear
• Potential use cases are also unclear, now that APEX has dropped support for jQuery UI accordions!
• Circles on large version are confusing and unnecessary

fa-alarm-check

• Alarm bells on small version look more like buttons, which gives the impression of a stopwatch rather than an alarm clock. Can't these be made to have a more rounded appearance?
• Conversely on the large version, the attachment of the alarm bells directly to the body of the clock gives the appearance of ears on a teddy bear. I would suggest they be physically separated like the small version.

fa-alarm-clock

• Large version: inconsistent line width on curve of right alarm bell

fa-alarm-minus

• Large version: inconsistent line widths on curves of alarm bells

fa-alarm-plus

• Large version: inconsistent line widths on curves of alarm bells

fa-alarm-snooze

• Large version: inconsistent line widths on curves of alarm bells

fa-alarm-times

• Large version: inconsistent line widths on curves of alarm bells
• Large version looks like a koala

fa-bug-slash

• Don't think this works. Slash should not overlap any of the bug's legs.

fa-file-brackets

• See previous evaluation of file icons

fa-file-csv

• See previous evaluation of file icons

fa-file-json

• See previous evaluation of file icons

fa-file-medical

• See previous evaluation of file icons

fa-file-prescription

• See previous evaluation of file icons

fa-file-signature

• See previous evaluation of file icons

fa-heat-map

• "Heat map" has too many meanings. This is actually a representation of a circular packing diagram.

fa-line-map

• This (especially the small version) meant nothing to me when I first saw it, seemingly bearing more resemblance to the ideogram on the original fa-language icon than Beck's classic tube map.
• Why don' the lines attach at the centre of the nodes?

fa-location-arrow-solid

• This violates the established Font APEX icon class naming convention. The -solid suffix is superfluous. The problem is that the pre-existing fa-location-arrow icon should have been called fa-location-arrow-o as it is an outline icon. In my opinion the naming convention should take precedence, with this new icon being named fa-location-arrow, and the earlier implementation being renamed fa-location-arrow-o, even if this changes the appearance of existing applications.

fa-location-circle

• This violates the established Font APEX icon class naming convention. Should be fa-location-circle-o.

fa-location-circle-solid

• This violates the established Font APEX icon class naming convention. Should be fa-location-circle.

fa-map-marker-camera

• I don't like this. It's not at all clear what the small version (especially at the default 16px size) is supposed to represent.

fa-map-marker-camera-o

• Also don't like this. Looks like the camera is melting.

fa-medical-mask

• It's not obvious this is supposed to represent. It's actually quite similar to the pre-existing fa-trophy.

fa-prescription

• Different lettering style

fa-prescription-sheet

• Why is this necessary? It's virtually the same as fa-file-prescription, which if implemented properly following the original file icon conventions would look far better. I would much rather have another occupational icon representing a pharmacist/scientist/professional or engineer/builder than this amateurish duplicate of another icon.
• Different lettering style

fa-radiation

• Central dot in small version is too small
• Would look better if the "rays" were represented either by concentric lines (see existing fa-feed icon) or if the segments were equal in size or smaller than the gaps between them

fa-size-l

• Are these really necessary? In what circumstances would they be used instead of plain text?

fa-size-s

• Different lettering style

fa-size-xl

• Inconsistent and poor letter spacing

fa-size-xs

• Different lettering style
• Inconsistent and poor letter spacing

fa-size-xxl

• Inconsistent and poor letter spacing

fa-user-slash

• This does not look good. A steeper angle on the slash would enable more of the base user outline to be retained. Existing -slash icons position the slash at different angles to better fit with the underlying design.

Thanks @Hilary Farrell-Oracle, @ShakeebRahman-Oracle, and the rest of the Oracle APEX team for the comprehensive resolution of these issues in APEX 21.2.

Hi Paul,

Thank you for the very comprehensive write-up. I'll forward this thread to the relevant team member, who can hopefully address the points you've raised. Consistency & quality are key, so we'll endeavour to address this for a future release of APEX. I'll update this thread with any follow-up responses from the team.

Regards,

Hilary

If you're experiencing issues with input fields in your APEX application, this is a Google Chrome bug that was introduced by a recent Chrome update.

It is not an Oracle APEX issue, so please try this quick workaround by @Tim Kimberl-Oracle to your CSS:

.apex-item-select,

.apex-item-text,

.apex-item-textarea,

.apex-item-multi {

backface-visibility: hidden;

}

You can add this CSS code to Custom CSS. When running the app, navigate to Developer Toolbar: Customize -> Theme Roller.

Update: Using the latest version of Google Chrome (Version 98.0.4758.102) this issue is not reproducible anymore

Please comment if you're still facing the issue, thanks.

If you try adding ":focus" onto the end of each item in the list - it should take effect when the item receives the focus

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

border: 1.1px solid #dfdfdf;

}

APEX vesion 20.2

Chrome version 94.0.4606.81

Using Universal Theme - 42

This issue only happened a week or so ago and only on Modal windows. Upon clicking on a field (e.g. text field or select list), the text becomes invisible. For text fields, you cannot see what you are typing but upon losing focus of the field, the text becomes visible.

This is not happened in Normal Windows, only Modal.

This seems to happen after upgrading to Chrome v94 but cannot be sure if that is the cause.

It is also not happening on all machines with the same version of Chrome. Also, it does not happen on Firefox and IE/MS Edge.

Have anyone encountered this?