Rotating Glyphicons/Font Awesome in Bootstrap

Rotating Glyphicons / Font Awesome in Bootstrap

The problem is that you're trying to transform an inline element - this isn't possible.

You'll need to change the display value of the glyphicon to inline block.

---

Here are the details from the CSS Transforms Module:

transformable element

A transformable element is an element in one of these categories:

• an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

• an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11]`

How to flip the glyphicon icon

Like this

HTML

<a href="#" class="btn"><i class="icon-rotate icon-flipped"></i></a>

CSS

.icon-flipped {
    transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
}

OR

http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped

Issue making Bootstrap3 icon spin

The issue is that you rotate an element which is not centered in your span.

If you want a real solution, add transform-origin on .spin to change the center of rotation

.spin{
     -webkit-transform-origin: 50% 58%;
     transform-origin:50% 58%;
     -ms-transform-origin:50% 58%; /* IE 9 */
     -webkit-animation: spin .2s infinite linear;
     -moz-animation: spin .2s infinite linear;
     -o-animation: spin .2s infinite linear;
     animation: spin .2s infinite linear;
}

http://jsfiddle.net/L4zTu/5/

Bootstrap 4 - Glyphicons migration?

You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons.

Bootstrap 4 also switched from Less to Sass, so you might integerate the font's Sass (SCSS) into you build process, to create a single CSS file for your projects.

Also see https://getbootstrap.com/docs/4.1/getting-started/build-tools/ to find out how to set up your tooling:

1. Download and install Node, which we use to manage our dependencies.
2. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed in package.json.
3. Install Ruby, install Bundler with gem install bundler, and finally run bundle install. This will install all Ruby dependencies, such as Jekyll and plugins.

Font Awesome

1. Download the files at https://github.com/FortAwesome/Font-Awesome/tree/fa-4
2. Copy the font-awesome/scss folder into your /bootstrap folder

3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

   $fa-font-path: "../fonts";
@import "../font-awesome/scss/font-awesome.scss";

4. Notice that you also have to copy the font file from font-awesome/fonts to dist/fonts or any other public folder set by $fa-font-path in the previous step

5. Run: npm run dist to recompile your code with Font-Awesome

Github Octicons

1. Download the files at https://github.com/github/octicons/
2. Copy the octicons folder into your /bootstrap folder

3. Open your SCSS /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

   $fa-font-path: "../fonts";
@import "../octicons/octicons/octicons.scss";

4. Notice that you also have to copy the font file from font-awesome/fonts to dist/fonts or any other public folder set by $fa-font-path in the previous step

5. Run: npm run dist to recompile your code with Octicons

Glyphicons

On the Bootstrap website you can read:

Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

As I understand you can use these 250 glyphs free of cost restricted for Bootstrap but not limited to version 3 exclusive. So you can use them for Bootstrap 4 too.

1. Copy the fonts files from: https://github.com/twbs/bootstrap-sass/tree/master/assets/fonts/bootstrap
2. Copy the https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_glyphicons.scss file into your bootstrap/scss folder
3. Open your scss /bootstrap/bootstrap.scss and write down the following SCSS code at the end of this file:

$bootstrap-sass-asset-helper: false;
$icon-font-name: 'glyphicons-halflings-regular';
$icon-font-svg-id: 'glyphicons_halflingsregular';
$icon-font-path: '../fonts/';
@import "glyphicons";

4. Run: npm run dist to recompile your code with Glyphicons

---

Notice that Bootstrap 4 requires the post CSS Autoprefixer for compiling. When you are using a static Sass compiler to compile your CSS you should have to run the Autoprefixer afterwards.

You can find out more about mixing with the Bootstrap 4 SCSS in here.

You can also use Bower to install the fonts above. Using Bower Font Awesome installs your files in bower_components/components-font-awesome/ also notice that Github Octicons sets the octicons/octicons/octicons-.scss as the main file whilst you should use octicons/octicons/sprockets-octicons.scss.

All the above will compile all your CSS code including into a single file, which requires only one HTTP request. Alternatively you can also load the Font-Awesome font from CDN, which can be fast too in many situations. Both fonts on CDN also include the font files (using data-uri's, possible not supported for older browsers). So consider which solution best fits your situation depending on among others browsers to support.

For Font Awesome paste the following code into the <head> section of your site's HTML:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Also try Yeoman generator to scaffold out a front-end Bootstrap 4 Web app to test Bootstrap 4 with Font Awesome or Github Octicons.

How do Bootstrap Glyphicons work?

In Bootstrap 2.x, Glyphicons used the image method - using images as you mentioned in your question.

The drawbacks with the image method was that:

• You couldn't change the color of the icons
• You couldn't change the background-color of the icons
• You couldn't increase the size of the icons

So instead of glyphicons in Bootstrap 2.x, a lot of people used Font-awesome, as this used SVG icons which did not have such limitations.

In Bootstrap 3.x, Glyphicons use the font method.

Using a font to represent an icon has advantages over using images:

• Scalable - works nicely regardless of client device's resolution
• Can change the colour with CSS
• Can do everything traditional icons can (e.g. change opacity, rotation, etc.)
• Can add strokes, gradients, shadows, and etc.
• Convert to text (with ligatures)
• Ligatures are read by screen readers
• Changing icons to fonts is as simple as changing the font-family in CSS

You can see what you can do with the font method for icons here.

So in the Bootstrap distribution, you can see the glyphicon font files:

fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff

The Bootstrap CSS refers to the glyphicon font like so:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

And the CSS links to this font using the .glyphicon base class (note the font-family):

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  ...
}

And then each glyphicon uses an individual icon class which refers to a Unicode reference within the Glyphicon Halflings font, e.g.:

.glyphicon-envelope:before {
  content: "\2709";
}

This is why you must use the base .glyphicon class as well as the individual icon class against the span element in Bootstrap 3:

<span class="glyphicon glyphicon-envelope"></span>

Increase the size of Bootstrap 2.3's Glyphicons

This is one way to increase the size of icons in Bootstrap 2.3. As I note in my comment, the results will be pretty poor because you are scaling the spritesheet image.

JSFiddle demo

.test {
    background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
    width: 90px;
    height: 90px;
    background-size: 2100px 800px;
}

Consider Fontello instead. They allow you to generate a custom font based on the icons you choose.

Animating Bootstrap glyphicons

Instead of adding a new glyphicon you can rotate the existing left one to bottom.

Like this:

.glyphicon-triangle-left{
    transition: transform .3s ease-in;
}
.glyphicon-triangle-left.rotate-90{
    transform:rotate(90deg);
}

Then toggle the rotate-90 class on click.

Updated the OP Fiddle

---

Related Topics