Icon Integration

Playbook seamlessly integrates with Font Awesome, a leading icon library known for its extensive collection of high-quality, scalable icons. This integration not only enhances the visual appeal of websites and applications but also improves overall usability.

Some Font Awesome benefits:

1. Wide Range of Icons: Font Awesome offers a vast selection of icons to suit a variety of needs. You can easily find the perfect icon for your project through their icon search.
2. Ease of Use: The icons are straightforward to implement. With just a few lines of code, you can quickly and easily add visual elements to your web projects. Note, a Pro subscription is required for access to a wider range of icons beyond the Free set.
3. Visual Appeal: Incorporating these icons can improve the aesthetic of your site or application, making it more attractive to users. With Playbook, you have the flexibility to customize color, size, and animations.
4. User-Friendliness: Icons can help users navigate and understand your website or application more efficiently, enhancing their overall experience. Font Awesome icons are web fonts compatible with most browsers and are optimized for performance and accessibility.

Integrating Font Awesome with Playbook ensures that you have access to these benefits, making your projects more polished and professional.

Ruby on Rails Setup

Default with an Asset Pipeline

Make sure you are on Rails 7 or higher.

1. Follow the Ruby on Rails Setup getting started page to setup Playbook with your Rails project.

2. Setup Pro or Free Font Awesome to use our Icon Component.

Pro:

# app/assets/stylesheets/application.scss
 @import "font-awesome-pro";
 @import "font-awesome-pro/solid";
 @import "font-awesome-pro/regular";
 @import "playbook";

# app/Gemfile
 source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do
   gem "font-awesome-pro-sass", "6.2.0"
 end

Free:

Currently only Free Regular icons are supported in our icon component structure.

# app/assets/stylesheets/application.scss
 @import "font-awesome";

# app/Gemfile
 source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do
   gem "font-awesome-pro-sass", "6.2.0"
 end

3. Bundle all the things!

bundle install

4. Go build awesome stuff!

Refer to our Icon kit to get started with Font Awesome icons in Playbook.

<%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %>

With a JavaScript Bundler

Make sure you are on Rails 7 or higher.

1. Follow the Ruby on Rails Setup getting started page to setup Playbook with your Rails project.

Use your desired bundler:

rails new CoolNewApp -j webpack

2. Follow the Ruby & React page if you want to use React with your project.

3. Setup Pro or Free Font Awesome to use our Icon Component.

Pro:

# app/assets/stylesheets/application.scss
 @import "font-awesome-pro";
 @import "font-awesome-pro/solid";
 @import "font-awesome-pro/regular";
 @import "playbook";

# app/Gemfile
 source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do
   gem "font-awesome-pro-sass", "6.2.0"
 end

If you prefer, you can install with JavaScript:

FONTAWESOME_PACKAGE_TOKEN=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX yarn add @fortawesome/fontawesome-pro

Free:

Currently only Free Regular icons are supported in our icon component structure.

# app/assets/stylesheets/application.scss
 @import "font-awesome";

# app/Gemfile
 source "https://token:TOKEN@dl.fontawesome.com/basic/fontawesome-pro/ruby/" do
   gem "font-awesome-pro-sass", "6.2.0"
 end

If you prefer, you can install with JavaScript:

yarn add @fortawesome/fontawesome-free

4. Bundle all the things!

bundle install

yarn

npm install

5. Build JavaScript for development

When using a bundling option, use bin/dev to start the Rails server and build JavaScript for development. Don't forget to add a build script in your package.json file:

"scripts": {
   "build": "webpack"
 },

6. Go build awesome stuff!

Refer to our Icon kit to get started with Font Awesome icons in Playbook.

<%= pb_rails("icon", props: { icon: "font-awesome", fixed_width: true }) %>

<Icon fixedWidth icon="font-awesome" />

Edit this page

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat