This commit introduces our own icons meant to be extended over time and
to coexist with FontAwesome 4.7.
The goal is to provide a wider range of icons specifically made for our
UI and cover FontAwesome's lack of iconography for specific businesses
and functionalities.
Classes' names are available in our documentation website and the SVG
source files can be found in our `design-assets` repo.
This new bundle mirrors fontAwesome architecture; icons are rendered
applying classes to standard HTML flow-tags (normally an `<i>`), eg:
`<i class="oi oi-odoo"/>`
This implementation applies size and alignment rules directly to the
`:before` pseudo-element rather than to the class itself. The aim is to
prevent misalignment when icon classes are applied to buttons and other
UI elements, eg:
`<button class="btn btn-success oi oi-arrow--right"/>`
Note: Despite being technically feasible, this approach is highly
discouraged and should be avoided.
This commit also introduces utility-classes specifically made for
our UI. In detail:
- Fours sizes: '.oi-small', '.oi-normal', '.oi-large', '.oi-larger'
Relative to the parent font-size, these classes cover a range from
`0.8em` to `1.77em`. Each size has been designed to match our default
text-fonts in the attempt to compensate font-icons common alignment
issues (https://css-tricks.com/icon-fonts-vs-svg/#aa-positioning ).
- Responsive classes: `.oi-[screen]-[icon_size]`
Responsive classes mirror Bootstrap ones and can be combined to
achieve different size results at specific resolutions, eg:
`<i class="oi oi-studio oi-larger oi-md-normal oi-lg-small"/>`
- Fixed width: '.oi-fw'
Mirrors FontAwesome 'fa-fw' by setting icons at a fixed width.
Our implementation adapts according to size and responsive classes.
- Animations: '.oi-spin', '.oi-pulse'
Mirrors FontAwesome default animations.
This commit is part of v16 overall restyle (task-2704984).
enterprise: https://github.com/odoo/enterprise/pull/23848
task-2745275
Part-of: odoo/odoo#83501
stefanorigano (SRI)
546477dafa