Article: Customizing Bootstrap Icons using Gulp

[SitePoint_Articles]

Extract from SitePoint article “Customizing Bootstrap Icons using Gulp” by Massimo Cassandro.

If you are developing a web project using Bootstrap, you may have the need to add a set of custom icons in the place of the default Glyphicons that come with the framework.

I’ve already covered the topic of building an icon using Illustrator and Icomoon, but what is the better way to integrate icons in a Bootstrap project?

Icomoon CSS vs Glyphicons CSS

When we download a set of icons from Icomoon (for this demo I’ve created a project called my-icons), we get the font files, some demo files (that provide a useful reference to our glyphs), and a style.css file. This one contains all the CSS rules you need to use the font in your project.

Lets take a look at the CSS file. It contains a @font-face declaration, a rule to catch all icon classes (based on the first part of their names) and a list of all icon classes:

@font-face {
  font-family: 'my-icons';
  src:url('fonts/my-icons.eot?-dp1fqh');
  /* other properties */
}
 
[class^="myicon-"], [class*=" myicon-"] {
  /* some properties */
}
 
.myicon-alert:before {
  content: "\e600";
}
 
.myicon-arrow-down:before {
  content: "\61";
}
 
/* ... more icons */

Now, let’s see the glyphicons.less file from Bootstrap:

// Import the fonts
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('@{icon-font-path}@{icon-font-name}.eot');
  /* other properties */
}
 
// Catchall baseclass
.glyphicon {
  /* some properties */
}
 
// Individual icons
.glyphicon-asterisk { 
  &:before {
    content: "\2a";
  }
}
 
.glyphicon-plus {
  &:before {
    content: "\2b";
  }
}
 
/* ... more icons */

They are very similar, but with some fundamental differences:

Continue reading article on SitePoint …