Fix missing icons in Active Admin’s Bootstrap skin

If you’re experiencing missing icons in the Active Bootstrap skin for Active Admin in a Ruby on Rails application, then you’re not alone.

Active Bootstrap skin with missed icons

This article applies to the version 0.1.5 of the Active Bootstrap skin gem.

To fix this issue, open the file app/assets/stylesheets/active_admin.scss and modify:

// @import "active_bootstrap_skin"; <- remove or comment this line previously in your code
@import "active_bootstrap_skin_modified";

Then, create a new file app/assets/stylesheets/active_bootstrap_skin_modified.scss. Paste the content of the file active_bootstrap_skin from the original gem. Here is the link to this file on the gem’s repository: https://github.com/vinhnglx/active_bootstrap_skin/blob/master/app/assets/stylesheets/active_bootstrap_skin.scss

In this file, delete or comment following lines (note: the completed code is presented here):

// #main_content_wrapper .table_actions {
//   @extend .btn-toolbar;
//   min-width: 117px;

//   > .member_link {
//     margin: (-3px) 10px 0 0;

//     &:last-child {
//       margin-right: 0;
//     }
//   }
// }

// @extend .glyphicon;
// font-size: 0;
// text-align: center;
// padding: 3px 0;
// width: 28px;

// &:before {
//   font-size: 14px;
// }

// .ui-sortable-handle {
//   @extend .glyphicon-sort;
//   cursor: all-scroll;
// }

// .view_link {
//   @extend .glyphicon-search;
// }

// .edit_link {
//   @extend .glyphicon-pencil;
// }

// .delete_link {
//   @extend .glyphicon-trash;
// }

Update the browser tab and you will see that buttons are now too big:

Buttons are too big

To fix this, add the following lines to the end of the file:

.member_link, .ui-sortable-handle {
  padding: 0px 10px;
}

The result:

Buttons with the proper size and without icons

You can see the completed file here.