The simplest way to get started is to add a copy of Fabric to your project.
fabric.css
in the <head>
of your page. Make sure the path is correct.fabric.components.css
after the fabric.css
reference.Now that your project references Fabric, you can apply type styles to any text element.
<span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
To use icons, add an <i>
element with the appropriate icon classes.
<i class="ms-Icon ms-Icon--mail" aria-hidden="true"></i>
By default, icons inherit the text size and color of their parent. To override this, apply type styles directly to the icon.
To use Fabric components:
In addition to downloading a copy for your project, you can include Fabric via a CDN reference, by adding it through a package manager, or by building your own copy from the source code.
If you prefer to have your project's assets stored on an external server, Fabric is available from the apps for Office CDN. To use it, include the following references in the <head>
of your page.
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css">
New versions of Fabric might not be available on the CDN right away. The following table lists the releases that are available now. To reference a specific version, update the version number in the URL to match the one you want.
Fabric Release | Available on CDN |
---|---|
2.6.1 | Version 2.6.1 Available on the CDN |
2.6.0 | Version 2.6.0 Available on the CDN |
2.5.0 | Version 2.5.0 Available on the CDN |
2.4.1 | Version 2.4.1 Available on the CDN |
2.4.0 | Version 2.4.0 Available on the CDN |
2.3.0 | Version 2.3.0 Available on the CDN |
2.2.0 | Version 2.2.0 Available on the CDN |
2.1.0 | Version 2.1.0 Available on the CDN |
2.0.1 | Version 2.0.1 Available on the CDN |
1.2.1 | Version 1.2.1 Available on the CDN |
1.1.3 | Version 1.1.3 Available on the CDN |
1.1.2 | Version 1.1.2 Available on the CDN |
1.1.1 | Version 1.1.1 Available on the CDN |
1.0.0 | Version 1.0.0 Available on the CDN |
Fabric is also available from a variety of package managers, including Bower, npm, and the NuGet Package Manager. You can quickly add Fabric as a package and stay up to date with the latest version.
To install Fabric using Bower, run the following command:
$ bower install office-ui-fabric
To install Fabric using npm, run the following command:
$ npm install office-ui-fabric
To install Fabric's NuGet package, run the following command in the package manager console:
PM> Install-Package OfficeUIFabric
Fabric is easy to build and customize locally using gulp and a handful of tasks to watch and build specific parts of the toolkit. You can also use gulp to build and tweak demos and samples.
For more information about how to build Fabric locally, including gulp tasks, check out our instructions on GitHub.