a17eaf4c6f
In particular, the following changes are made: - Use the `class` and `attribute` admonitions along with custom attributes to define classes, views' root attributes, views' components, and attribute values. This allows re-using the responsive design that was made for reference lists, and getting rid of the previous implementation that relied on class attributes, which were not intended for this usage and reduce readability while hindering further contributions due to a lack of flexibility (no admonitions, sub-attributes...) - Use definition lists to define view types to allow for clearer and longer descriptions. - Rewrite and restructure the explanations when there is a lack clarity. - Extract duplicated content to included RST files. - Display SVG images into dedicated admonitions. - Fix RST and English mistakes. - Rename `view_architecture` to `view_architectures`, as it lists all existing architectures and doesn't describe "the architecture of a view". - Replace underscores with hyphens in image file names to improve SEO. task-3458320 closes odoo/documentation#5237 closes odoo/documentation#7453 Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
117 lines
3.5 KiB
ReStructuredText
117 lines
3.5 KiB
ReStructuredText
:hide-page-toc:
|
|
|
|
.. _reference/user_interface/ui_icons:
|
|
|
|
========
|
|
UI icons
|
|
========
|
|
|
|
Odoo's user interface mostly relies on `FontAwesome4 icons <https://fontawesome.com/v4/icons/>`_.
|
|
|
|
To cover FontAwesome's lack of iconography for specific functionalities, we designed our own
|
|
icon-font. These icons can be rendered using the main `oi` class in conjunction with the specific
|
|
icon class.
|
|
|
|
.. example::
|
|
|
|
.. code-block:: html
|
|
|
|
<i class="oi oi-odoo"/>
|
|
|
|
.. raw:: html
|
|
|
|
<section class="row">
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-apps h1 p-4"></i>
|
|
<code>oi-apps</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-group h1 p-4"></i>
|
|
<code>oi-group</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-launch h1 p-4"></i>
|
|
<code>oi-launch</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-odoo h1 p-4"></i>
|
|
<code>oi-odoo</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-panel-right h1 p-4"></i>
|
|
<code>oi-panel-right</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-search h1 p-4"></i>
|
|
<code>oi-search</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-settings-adjust h1 p-4"></i>
|
|
<code>oi-settings-adjust</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-studio h1 p-4"></i>
|
|
<code>oi-studio</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-cohort h1 p-4"></i>
|
|
<code>oi-view-cohort</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-kanban h1 p-4"></i>
|
|
<code>oi-view-kanban</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-list h1 p-4"></i>
|
|
<code>oi-view-list</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-view-pivot h1 p-4"></i>
|
|
<code>oi-view-pivot</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
|
|
<div class="card text-center">
|
|
<i class="oi oi-voip h1 p-4"></i>
|
|
<code>oi-voip</code>
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|