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 icons that are flexible and easy to use.

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.

Note: There are some new icons that are not included in our version of Font Awesome, for example TikTok and X (formerly known as Twitter). We are planning to upgrade to the latest version after the next upgrade to Kentico.

Buttons with icons

Preview
Code

GitHub X Save Delete

<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="fa-brands fa-x-twitter" aria-hidden="true"></i>
        </span>
        <span>X</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

Preview
Code

<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="X">
            <span class="fa-brands fa-x-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.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>

Icons

Buttons with icons

Social media icons

Usage

Accessibility