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](https://rubygems.org/gems/active_bootstrap_skin/versions/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

More from this blog