Icons

We've settled for two icon sources, Pro version of Font Awesome and we no longer use any custom icons in the new design. We currently use version 5 Pro, see here for available icons. For more details about usage, refer to this website here. In a lot of cases we add the icon into the CSS code together with the ::before or ::after pseudoclasses and in HTML we use our predefined classes that defines the position and type of the icon, for example, ".icon after .arrow-angle". In some cases, we enter the "i" tags directly to our HTML code. Most icons have titles explaining what action should an icon perform.

Modules icons

For modules, we also use the Font Awesome icons. These icons are used as search filters and placeholders when the photo in the profile was not uploaded.

  <i class="icon-people" title="People"></i>
  <i class="icon-companies" title="Companies"></i>
  <i class="icon-films" title="Films"></i>
  <i class="icon-film_packages" title="Film packages"></i>
  <i class="icon-events" title="Events"></i>
  <i class="icon-missions" title="Projects"></i>

Profile widgets icons

Some profile widgets have icons in the top right corner. By using them you can open more details, edit a widget or show data from other editions. In this case, we directly use the whole "i" element with all Font Awesome classes.

<i class="fal fa-file-search js-business-cards" title="Show all contacts details"></i>
<i class="fal fa-edit js-edit-tag" title="Edit tags"></i>
<i class="fal fa-history js-show-archive-group" data-icon="active" data-settings-key="profile-show-groups-archive" title="Show groups from all editions"></i>

Other

We have a few other icons that we use to perform specific actions, like icons for adding elements, clearing or closing, opening the menu, etc. Below you can see a few examples:

<a class="js-toggle toggle plus icon-before"></a>
<i class="far fa-times js-search-clear "></i>
<div class="js-toggle arrow-caret icon-after toggle">More actions</div>