Use an Image Instead of a Bootstrap's Glyphicon

Use an image instead of a Bootstrap's glyphicon

You can use simple img inside .input-group-addon instead of span.glyphicon and with some negative margins you can get the result you want.

HTML

<div class="input-group">
   <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">      
   <span class="input-group-addon">
       <img src="http://i.stack.imgur.com/vr0uy.png">
       <span class="hidden-xs text-upper-style">Rechercher</span>
   </span>      
</div>

CSS

.rechercheProduit .input-group-addon img{
  height: 24px;
  margin-right: -16px;
  margin-bottom: -6px;
  vertical-align:text-bottom; /* align the text */
}

---

Updated Bootply

Replace image with Bootstrap Glyphicons

Here my update code to replace image in css and using font awesome

.inputShowPwd > .showpass {
     display: none;
     position: absolute;
     height: 24px;
     width: 24px;
     top: 50%;
     margin-top: -10px;
     right: 2px;
}
.inputShowPwd > .showpass:after {
     content:"\f06e"; /*this is unicode of eye on font awesome*/
     font-family: "FontAwesome";
}

and this is the preview of the code

it show the eye font awesome icon don't blur when i zoom in

Using a glyphicon outside of bootstrap

You have three options other than the one you have already tried.

SVG

You can use an SVG image rather than a PNG, which will not pixellate as you make it bigger or smaller as its a vector.

The disadvantage of this is some older browsers don't have SVG support (IE 8 and below I believe)

FontAwesome / Other icon font family

These are cross browser compatible so you won't have that problem. However you will have to load in an entire font just to use one character. Which probably isn't ideal. It is still better than loading in the entire bootstrap css library though.

Customise Bootstrap

Alternatively your third option is to head over to bootstraps website and customise your build and just include the glyphicons icons.

Bootstrap 3 - Glyphicon over image

I edit only CSS, adding a position relative to Lens icon, and set a fixed width to container.

.PNET-cursor-hand
{
    width:140px;
}

.PNET-thumbcolor .glyphicon-zoom-in
{
    position:relative;
    top:-20px;
    right:5px;
    text-align:right;
    display:block;
}

Here the demo

Bootstrap using image indead of glyphicon

Try this:

.glyphicon-home{
    display:inline-block;
    background-image:url('../images/YOUR_IMAGE.png');
    width:20px;
    height:20px;
}

Bootstrap with image icons

You can include bootstrap glyphicons as icons using the below markup. Instead of text, update to <i> tag with respective glyphicon.

<div class="container">
    <ul class="nav nav-pills">
        <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>
        <li><a href="#"><i class="glyphicon glyphicon-ok"></i></a></li>
        <li><a href="#"> <i class="glyphicon glyphicon-info-sign"></i></a></li>
        <li><a href="#"><i class="glyphicon glyphicon-folder-open"></i></a></li>
    </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container"> <ul class="nav nav-pills">  <li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i></a></li>  <li><a href="#"><i class="glyphicon glyphicon-ok"></i></a></li>  <li><a href="#"> <i class="glyphicon glyphicon-info-sign"></i></a></li>  <li><a href="#"><i class="glyphicon glyphicon-folder-open"></i></a></li> </ul></div>

How to use Bootstrap Glyphicons in Holder.js images

Ok, so this didn't peak the interest of anyone. But I solved the issue for myself, thought it good etiquette to share my solution with the community.

I had to do two things. After I realised holder.js parses the JavaScript canvas draw into a png image file, the issue was less of a "holder.js" issue and more of a pure JS and web font / fontface issue.

First thing: I had to explicitly tell the system that the Glyphicons were fonts and what I was referring to them as. I did this with the following CSS:

@font-face {
            font-family: 'Glyphicons Halflings';
            font-style: normal;
            font-weight: normal;
            src: local('Glyphicons Halflings'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype');
        }

Second: Once the browser knew the name, location and type of font I was using I could start to use it to pass unicode characters to a JS canvas object. Holder.js has a settings Var which holds an array of "themes", I added the following custom theme to the array:

"blueGlyph": {
        background: "#3a87ad",
        foreground: "#ffffff",
        size: 128,
        font:"Glyphicons Halflings"
    }

Third: Now all I had to do was pass the unicode character to the JS script and it would produce icon images on the fly. The HTML looked as follows:

<img src="data:image/png;base64," data-src="holder.js/140x140/text:/blueGlyph">

Which produced the following dynamically produced image:

The key to selecting and passing the unicode character in the correct format for it to be interpreted and drawn was to pass the unicode character using the HTML method. ie &#x*{UNICODE HERE}*; . Or " ;" as per the above example.

Here's the fiddle if you want to mess around with it.

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

---

Related Topics