Academicons was originally built as a supplement to Font Awesome 5, so the two fonts can be used together. See Font Awesome 5 documentation for styling icons.

Styling

Coloring

<span style="color: #b2c046;"><i class="ai ai-orcid ai-2x"></i></span>
<span style="color: #cf4a31;"><i class="ai ai-conversation ai-2x"></i></span>

Sizing

<i class="ai ai-doi ai-xs"></i>
<i class="ai ai-doi ai-sm"></i>
<i class="ai ai-doi ai-lg"></i>
<i class="ai ai-doi ai-2x"></i>
<i class="ai ai-doi ai-3x"></i>
<i class="ai ai-doi ai-5x"></i>
<i class="ai ai-doi ai-7x"></i>
<i class="ai ai-doi ai-10x"></i>

Icons in a List

List icons can
be used to
replace bullets
in lists

<ul class="fa-ul" style="font-size: 2em;">
  <li><span class="fa-li"><i class="ai ai-africarxiv-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="ai ai-arxiv-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="ai ai-biorxiv-square"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="ai ai-psyarxiv-square"></i></span>in lists</li>
</ul>

Rotating Icons

<div class="ai-4x">
  <i class="ai ai-inaturalist"></i>
  <i class="ai ai-inaturalist fa-rotate-90"></i>
  <i class="ai ai-inaturalist fa-rotate-180"></i>
  <i class="ai ai-inaturalist fa-rotate-270"></i>
  <i class="ai ai-inaturalist fa-flip-horizontal"></i>
  <i class="ai ai-inaturalist fa-flip-vertical"></i>
  <i class="ai ai-inaturalist fa-flip-both"></i>
</div>

Animating Icons

<div class="ai-4x">
  <i class="ai ai-figshare fa-spin"></i>
  <i class="ai ai-figshare fa-pulse"></i>
</div>

Pulled Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<i class="ai ai-google-scholar ai-2x ai-pull-left"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bordered Icons

<i class="ai ai-google-scholar ai-2x ai-pull-left ai-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Stacked Icons

<span class="fa-stack">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fa-location-arrow fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="ai ai-academia ai-stack-1x"></i>
</span>
<span class="fa-stack" style="vertical-align: top;">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="ai ai-academia ai-stack-1x ai-inverse"></i>
</span>