How to Overlay a Number on Top of a Fontawesome Glyph

How can I overlay a number on top of a FontAwesome glyph?

You css should look something like:

.contain-i-e-s,.icon-empty-star,.text-i-e-s{
  height:100px; width:100px;
}
.contain-i-e-s{
  position:relative;
}
.text-i-e-s{
  text-align:center; position:absolute;
}

Your HTML might look like:

<div class='contain-i-e-s'>
  <i class='icon-empty-star'></i>
  <div class='text-i-e-s'>99</div>
</div>

Draw a slash line over glyphicon or font-awesome icon using CSS

Font awesome uses the :before tag for icons, why not use the :after pseudo and .fa.fa-signal:after {content: "/"; color: red;} and position it with css.

.fa.fa-signal:after {
  position: absolute;
  content: "/";
  color: red;
  font-weight: 700;
  font-size: 1.7em;
  left: 7px;
  top: -10px;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<i class="fa fa-signal fa-2x"></i>

How do I make sure every glyph has the same width?

Since 3.1.1, you could use the icon-fixed-width class instead of having to edit the CSS.

http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation

Since 4.0, you should use fa-fw:

4.x https://fontawesome.com/v4.7.0/examples/#fixed-width

5.x https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Thanks @kalessin for pointing out.

How to increase font-awesome icon size which has text inside of it (using fa-stack)

When an icon is part of a stack, you cannot change its size independently of the rest of the stack.

You can, however, change the overall size of the stack by adding one of the fa-1x fa-2x fa-3x etc classes to the parent as in the snippet below.

<span class="fa-stack fa-2x">    <i class="fa fa-circle fa-stack-2x"></i>    <i class="fa fa-stack-1x fa-inverse">1</i></span><span class="fa-stack fa-2x">    <i class="fa fa-circle-o fa-stack-2x"></i>    <i class="fa fa-stack-1x">1</i></span><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Font Awesome icon inside text input element

You're right. :before and :after pseudo content is not intended to work on replaced content like img and input elements. Adding a wrapping element and declare a font-family is one of the possibilities, as is using a background image. Or maybe a html5 placeholder text fits your needs:

<input name="username" placeholder="">

Browsers that don’t support the placeholder attribute will simply ignore it.

UPDATE

The before content selector selects the input: input[type="text"]:before. You should select the wrapper: .wrapper:before. See http://jsfiddle.net/allcaps/gA4rx/ .
I also added the placeholder suggestion where the wrapper is redundant.

.wrapper input[type="text"] {
        position: relative; 
    }
    
    input { font-family: 'FontAwesome'; } /* This is for the placeholder */
    
    .wrapper:before {
        font-family: 'FontAwesome';
        color:red;
        position: relative;
        left: -5px;
        content: "\f007";
    }

    
    <p class="wrapper"><input placeholder=" Username"></p>

How to draw Font Awesome Icons onto html canvas [Version 5]

Sample Image

Here's how to draw Font Awsome glyphs on html5 canvas:

Link in Font Awesome:

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

Set the context font to Font Awesome:

// set the canvas context's font-size and font-face
context.font='14px FontAwesome';

Draw one of the Font Awesome characters on the canvas:

// specify the desired character code with the Unicode prefix (\u) 
context.fillText('\uF047',20,50);

Here's example code and a Demo:

var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d");
ctx.font='12px verdana';ctx.fillText('Please wait for Font Awesome to load...',20,30);
// give font awesome time to loadsetTimeout(start,2000);
function start(){  ctx.clearRect(0,0,canvas.width,canvas.height);  ctx.font='30px FontAwesome';  ctx.fillText('\uF047',20,50);}

body{ background-color: ivory; }#canvas{border:1px solid red; margin:0 auto; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><script src="https://code.jquery.com/jquery-2.1.1.min.js"></script><h4>Font Awesome glyph drawn onto html5 canvas</h4><canvas id="canvas" width=300 height=100></canvas>

Bootstrap 3: Can the Glyphicons be stacked like Font Awesome's icons?

Bootstrap's CSS for Glyphicons don't have classes to stack. You could apply the classes from your example code: http://bootply.com/88775

css

.icon-stack {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    position: relative;
    vertical-align: -35%;
    width: 2em;
}
.icon-stack .icon-stack-base {
    font-size: 2em;
}
.icon-stack [class^="icon-"], .icon-stack [class*=" icon-"] {
    display: block;
    font-size: 1em;
    height: 100%;
    line-height: inherit;
    position: absolute;
    text-align: center;
    width: 100%;
}
.icon-stack .glyphicon{
    font-size: 2em;
}
.glyphicon-ban-circle
{
    color:red;
}

html

<span class="icon-stack">
<i class="glyphicon glyphicon-phone icon-stack-base"></i>
<i class="glyphicon glyphicon-ban-circle"></i>
</span>

Font Awesome Image Overlay

I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.

<a href="#" title="" class="image">
  <img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="Sample Image">
</a>

<div class="cn">
   <div class="inner">
      <a href="#zoom"><i class="icon-zoom-in large"></i></a>
      <a href="#download"><i class="icon-cloud-download large"></i></a>
      <a href="#comment"><i class="icon-comment large"></i></a>  
   </div>
</div>

Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com

CSS for star ratings via FontAwesome

The overflow:hidden needs to be on 'stars-active' (the sized element) instead of 'score-wrap' (which never overflows.) You can use white-space: nowrap to prevent the stars from wrapping to the next line within the hidden-overflow container.

.score {  display: block;  font-size: 16px;  position: relative;  overflow: hidden;}
.score-wrap {  display: inline-block;  position: relative;  height: 19px;}
.score .stars-active {  color: #EEBD01;  position: relative;  z-index: 10;  display: inline-block;  overflow: hidden;  white-space: nowrap;}
.score .stars-inactive {  color: grey;  position: absolute;  top: 0;  left: 0;  -webkit-text-stroke: initial;  /* overflow: hidden; */}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:88%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:50%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:100%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>
<span class="score">    <div class="score-wrap">        <span class="stars-active" style="width:0%">            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>            <i class="fa fa-star" aria-hidden="true"></i>        </span><span class="stars-inactive">            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>            <i class="fa fa-star-o" aria-hidden="true"></i>        </span></div></span>