1. Design System
  2. Base
  3. Icons

Icons

We use Font Awesome 5, one of the most widely used icon font families for our icon library. Font Awesome gives you access to a library of 1,534 (currently) icons that are flexible, easy to use, and updated regularly.

Font Awesome CSS and font files are included in Kentico and ready to use. If you would like to use icons on your non-Kentico website, you will have to either download and host your own or you could use the Font awesome CDN.

Buttons with icons

<p class="buttons">
    <a class="button" href="#">
        <span class="icon">
            <i class="fab fa-github" aria-hidden="true"></i>
        </span>
        <span>GitHub</span>
    </a>
    <a class="button" href="#">
        <span class="icon">
            <i class="fab fa-twitter" aria-hidden="true"></i>
        </span>
        <span>Twitter</span>
    </a>
    <a class="button" href="#">
        <span class="icon">
            <i class="fas fa-check" aria-hidden="true"></i>
        </span>
        <span>Save</span>
    </a>
    <a class="button" href="#">
        <span>Delete</span>
        <span class="icon">
            <i class="fas fa-times" aria-hidden="true"></i>
        </span>
    </a>
</p>

Social media icons

<div class="level">
    <div class="level-item has-text-centered">
        <a href="https://www.facebook.com/oxfordbrookes" aria-label="Facebook">
            <span class="fab fa-facebook-f is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.twitter.com/oxford_brookes" aria-label="Twitter">
            <span class="fab fa-twitter is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.linkedin.com/edu/school?id=12621&oxfordbrookes" aria-label="Linkedin">
            <span class="fab fa-linkedin-in is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.youtube.com/oxfordbrookes" aria-label="Youtube">
            <span class="fab fa-youtube is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.flickr.com/photos/40003115@N05/" aria-label="Flickr">
            <span class="fab fa-flickr is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.pinterest.com/oxfordbrookes/oxford-brookes-university/" aria-label="Pinterest">
            <span class="fab fa-pinterest-p is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.instagram.com/oxfordbrookes/" aria-label="Instagram">
            <span class="fab fa-instagram is-size-2"></span>
        </a>
    </div>
    <div class="level-item has-text-centered">
        <a href="https://www.weibo.com/OxfordBrookesUni" aria-label="Weibo">
            <span class="fab fa-weibo is-size-2"></span>
        </a>
    </div>
</div>

Arrow link text

<p>
    <a class="text-link" href="#" title="Cite Them Right" target="_self">Cite Them Right <span class="text-link-icon fa fa-arrow-right" aria-hidden="true"></span></a>
</p>

Quote link

<div class="staff-profile-quote-block">
    <a class="staff-profile-quote-link has-text-weight-bold" href="#" title="Read more about Anna" target="_self">Read more about Anna <span class="staff-profile-quote-link-icon fa fa-arrow-right" aria-hidden="true"></span></a>
</div>

Round arrow link text

<div class="staff-profile-quote-block">
    <div class="cp-video-link left"><a href="#" class="cp-video-link-text">Geography research field trip in Spain<span class="cp-video-icon fas fa-play-circle" aria-hidden="true"></span> </a></div>
</div>

Usage

Read the Font Awesome documentation for more information

Accessibility

Read about techniques for making your icons accessible