Customizing Bootstrap Icons using Gulp

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:

[code language="css"]
@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 */
[/code]

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

[code language="css"]
// 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 */
[/code]

They are very similar, but with some fundamental differences:

• First, Glyphicons is a Less file (there is a Sass file too) and the icon font path and name are assigned to two variables (@{icon-font-path} and @{icon-font-name}).
• Glyphicons uses a class as a “catchall” selector (.glyphicon), while Icomoon uses an attribute selector.
• Glyphicons uses the parent selector (&) for individual classes.

The last point can be really useful in some situations, because it can simplify the way you build your CSS files.

The ampersand refers to the parent of each rule, and when glyphicons.less is compiled, it produces exactly the same result as the Icomoon CSS:

[code language="css"]
.glyphicon-asterisk:before {
content: "\2a";
}
[/code]

So, what’s the difference?

Simply put, you can use each icon class as a mixin, therefore you can embed them in other rules without worrying about any changes to the original class.

Lets see a sample.

Using font mixins

In the screenshot below, you can see an alert block that uses an icon from the my-icons font created with Icomoon.

The icon is applied using a span element; this is the “classic” way to use an icon font, and it is the same way suggested for Bootstrap Glyphicons.

Therefore, to build our example we need to add a span.myicon-alert element inside a container (in this case a div):

[code language="html"]

.alert

[/code]

You can’t apply the myicon-alert directly to the div, because it would inherit the icon font. This is the reason we need the additional span element. But using mixins there’s another way to solve our problem.

First, let’s rearrange our icon font in the same way as Glyphicons and build the alert rules using mixins:

[code language="css"]
/* this replaces the [class^="myicon-"], [class*=" myicon-"] selectors */
.myicon {
/* catchall properties */
}

.myicon-alert {
&:before {
content: "\e600";
}
}

.alert {
/* some properties */
.myicon-alert();
&:before {
.myicon();
}
}
[/code]

.myicon-alert and .myicon (parentheses can be omitted) refer to the respective classes, and import all their properties inside the .alert rule.

This is the generated CSS:

[code language="css"]
.myicon {
/* catchall properties */
}

.myicon-alert:before {
content: "\e600";
}

.alert {
/* some properties */
}

.alert:before {
content: "\e600";
}

.alert:before {
/* myicon catchall properties */
}
[/code]

Now we can minimize the markup and obtain the same result as the previous sample without a span element:

[code language="html"]

.alert

[/code]

But the generated CSS is redundant: the catchall properties are repeated twice, there are two .alert:before rules, and so on.

We can do it more efficiently using the :extend pseudo-class:

Continue reading %Customizing Bootstrap Icons using Gulp%

by Massimo Cassandro via SitePoint