NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
18.0
documentation/content/developer/reference/user_interface/icons.md
hoangvv 637a4dd9fd convert rst to markdown
2025-02-27 18:56:07 +07:00

10 KiB
Raw Permalink Blame History

(reference-user-interface-ui-icons)=

UI icons

Odoo's user interface mostly relies on FontAwesome4 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"/>

Icons

<section class="row">

   <div class="o_icon_card col-6 col-sm-4 col-md-3 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 mb-3">
       <div class="card text-center">
           <i class="oi oi-view h1 p-4"></i>
           <code>oi-view</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 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 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 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 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 mb-3">
       <div class="card text-center">
           <i class="oi oi-text-break h1 p-4"></i>
           <code>oi-text-break</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-text-inline h1 p-4"></i>
           <code>oi-text-inline</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-text-wrap h1 p-4"></i>
           <code>oi-text-wrap</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-text-effect h1 p-4"></i>
           <code>oi-text-effect</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 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 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 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 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 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 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 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 mb-3">
       <div class="card text-center">
           <i class="oi oi-voip h1 p-4"></i>
           <code>oi-voip</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-gif-picker h1 p-4"></i>
           <code>oi-gif-picker</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-close h1 p-4"></i>
           <code>oi-close</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-chevron-down h1 p-4"></i>
           <code>oi-chevron-down</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-chevron-left h1 p-4"></i>
           <code>oi-chevron-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-chevron-right h1 p-4"></i>
           <code>oi-chevron-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-chevron-up h1 p-4"></i>
           <code>oi-chevron-up</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrows-h h1 p-4"></i>
           <code>oi-arrows-h</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrows-v h1 p-4"></i>
           <code>oi-arrows-v</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-down-left h1 p-4"></i>
           <code>oi-arrow-down-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-down-right h1 p-4"></i>
           <code>oi-arrow-down-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-down h1 p-4"></i>
           <code>oi-arrow-down</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-left h1 p-4"></i>
           <code>oi-arrow-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-right h1 p-4"></i>
           <code>oi-arrow-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-up-left h1 p-4"></i>
           <code>oi-arrow-up-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-up-right h1 p-4"></i>
           <code>oi-arrow-up-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-up h1 p-4"></i>
           <code>oi-arrow-up</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-draggable h1 p-4"></i>
           <code>oi-draggable</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-archive h1 p-4"></i>
           <code>oi-archive</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-unarchive h1 p-4"></i>
           <code>oi-unarchive</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-smile-add h1 p-4"></i>
           <code>oi-smile-add</code>
       </div>
   </div>

</section>

RTL adaptations

Directional icons have {abbr}RTL (right-to-left) adaptations which flip the icons by 180 degrees when an {abbr}RTL (right-to-left) language is selected.

<section class="row">

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-chevron-left h1 p-4"></i>
           <code>oi-chevron-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-chevron-right h1 p-4"></i>
           <code>oi-chevron-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-down-left h1 p-4"></i>
           <code>oi-arrow-down-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-down-right h1 p-4"></i>
           <code>oi-arrow-down-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-left h1 p-4"></i>
           <code>oi-arrow-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-right h1 p-4"></i>
           <code>oi-arrow-right</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-up-left h1 p-4"></i>
           <code>oi-arrow-up-left</code>
       </div>
   </div>

   <div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
       <div class="card text-center">
           <i class="oi oi-arrow-up-right h1 p-4"></i>
           <code>oi-arrow-up-right</code>
       </div>
   </div>

</section>