Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-2

How do we specify path to the bootstrap 2.3 glyphicon icons


How do we specify the path to glyphicon icons image

Currently, I have this setup

/assets
    --css
    ----lib (bootstrap css file here)
    --img (glyphicons here)
    --js (javascripts here)

I have this in my html view

<a class="btn btn-primary top-modal-slide" data-toggle="modal" data-target="#formModal">
    <i class="icon-align-left"></i>
</a>

The image icon does not show up. If I trace the class that is applied to the above button for loading then it shows the following path.

http://localhost:xxxxx/assets/css/img/glyphicons-halflings.png

So, it is looked in /assets/css/img folder. How does bootstrap decide where to look for the glyphicons, and how can we change that. For example, in my case how do I configure it to look at

http://localhost:xxxxx/assets/img/glyphicons-halflings.png

instead.


Solution

  • Bootstrap 3: Just check the bootstrap(.min).css, there is a @font-face definition for the glyphicons. Here you could change the paths.

    Bootstrap 2: Check the bootstrap(.min).css for the file path and change it to your relative filepath. Uncompressed version check line 2285 and 2309