Use Fontawesome or Glyphicons with CSS :Before

Use FontAwesome or Glyphicons with css :before

What you are describing is actually what FontAwesome is doing already. They apply the FontAwesome font-family to the ::before pseudo element of any element that has a class that starts with "icon-".

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

Then they use the pseudo element ::before to place the icon in the element with the class. I just went to http://fortawesome.github.com/Font-Awesome/ and inspected the code to find this:

.icon-cut:before {
  content: "\f0c4";
}

So if you are looking to add the icon again, you could use the ::after element to achieve this. Or for your second part of your question, you could use the ::after pseudo element to insert the bullet character to look like a list item. Then use absolute positioning to place it to the left, or something similar.

i:after{ content: '\2022';}

Why use :before pseudo-elements to display glyph icons?

I feel this question can be divided into two separate ones:

1. Why use fonts for icons?

2. Why use :before pseudo-elements to display them?

For the first part, reasons are many, but it boils down to being easy to work with (as they are vectors, have transparent backgrounds by nature, can change colours easily) and had very good support even on older browsers.

For the second part, using pseudo-elements means that your icons can fully "live" in your CSS file. Apart from it being easier to edit there, that's also where they belong - they are not part of your content, but are rather something that affects the appearance of it and thus shouldn't be in your HTML. Think of it as the same distinction as between img tag and background-image CSS property (once again - design vs content).

In addition, this prevents some strange side-effects, for example, pseudo-elements can't be selected and thus can't be copied. If this weren't the case, all icons would, when copied, result in strange characters in the destination where you copy them.

How to replace Glyphicons with FontAwesome in Bootstrap 3 without changing HTML?

You can use the following approach to overload Glyphicon CSS classes with FontAwesome ones using SCSS:

// Overloading "glyphicon" class with "fa".
.glyphicon {

    @extend .fa;

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left".
    &.glyphicon-chevron-left {
        @extend .fa-chevron-left;
    }

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right".
    &.glyphicon-chevron-right {
        @extend .fa-chevron-right;
    }
}

This solution is based on code of Steven Clontz.

Make sure, that FontAwesome SCSS is imported before this overrides.

In the above example I'm overloading the following two Glyphicons: chevron-left and chevron-right with the following FontAwesome icons: arrow-left and arrow-right respectfully.

You will need to overload all icons used in third-party components to achieve what you need.

However, consider this as a HACK and DO NOT overload ALL icons, cause it will make your CSS unnecessarily bigger!

Consider persuading your third-party vendor to implement support for different icon libraries. This will be a proper solution.

How Can I Use CSS :after to Add a Glyphicon Element to an Input

:before and :after are applied inside a container, which means you can
use it for elements with an end tag.see explanation

See below example. to achieve what you want.

NOTE: parent position is relative so that chilled absolute position will take top and bottom depending on parent.

.myInput:after {

  font-family: FontAwesome;

  content: "\f0a9";

  position: absolute;

  top: 3px;

  left: 7px;

}

.my{

position:relative

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />

<div class="my">

  <div class="myInput">

    <input type="text" />

  </div>

</div>

How to include Glyphicons without using Bootstrap CSS

Here is a bower package that you can use only glyphicons out of entire bootstrap.

Check this github repository https://github.com/ohpyupi/glyphicons-only-bootstrap

or

bower install glyphicons-only-bootstrap

EDIT

Now it's possible to download the package through NPM.

npm install glyphicons-only-bootstrap

How to use glyphicons and font awesome icons simultaneously in free jqgrid toolbar

Your question don't includes enough implementation details. If one just use the code in standard free jqGrid then one will don't see any glyphicon icon because fa class are added too. If one would remove fa class and the button (the <span> with icon classes) will have ui-pg-button-icon-over-text fa-lg fa-fw glyphicon glyphicon-cloud-download callses then I don't see and problem with glyphicon position. See the demo as an example, which results looks like

So it should be a problem with other CSS rules which you use. I suppose that you need just to add one more CSS rule which fixes your custom CSS settings:

.ui-jqgrid .ui-pg-button span.glyphicon {
    margin-top: ???px; /* SET value/values instead of ???, -5px, for example */
}

which would specify new value for margin-top. The value could be negative if required. You should just choose the value of margin which corresponds other CSS settings which you use. You can use Developer Tools of IE or Chrome to analyse which CSS rules will be applied on the icon and to overwrite there with your custom rules.

How to use font awesome icons or Bootstrap glyphicons to act like check box

If you use a checkbox input, this becomes very simple. This css rule will set text color of the following label to green:

input:checked + label {
  color: green;
}

HTML:

<input type="checkbox" name="test">
<label for="test"><i class="fas fa-chair"></i>...</label>

Replacing glyph icons with FontAwesome icons

I think this would work:

<span><i class="fa fa-angle-up"></i></span>
<span><i class="fa fa-angle-down"></i></span>

---

Related Topics