Glyphicons Pro icon not showing correctly in Rails 4.2/Bootstrap

Question

After purchasing Glyphicons online, I integrate the glyphicons regular with Bootstrap (3.3.6) into Rails 4.2 app. Before that glyphicon halfings has been integrated by someone else.

What I did was to copy 5 Glyphicon files ( svg, ttf, eot, woff, woff2 ) to glyphicons/web/bootstrap-example/fonts/ to assets/fonts/ . Also copied is plyphicons/web/bootstrap-example/css/glyphicons.css to `assets/stylesheets/'.

Here are the files under Rails assets:

The problem is that the icon in glyphicon regular not showing.

In application.css.scss , add @import glyphicons.css

The problem is that the glyphicon are not showing correctly. Here is the herb codel:

<%= link_to '<i class="glyphicons glyphicons-eye-open"></i> Free Trial Now'.html_safe,... %>

It is showing a box with char (can't read) in 4 corners. See image below:

What's missing in our process?

Answer 1

Well, the first thing you should do is to open the browser debug console (Ctrl+shift+i in chrome) and list out the errors that causing this bug.

Normally there are always some image references in the third party .css files. And when you integrate those files you need to change the image url/path according to the need.

Answer 2

Try like this:

this is correct method to use glyphicons into the link

 <td><%= link_to edit_user_path(user) do %>
         <i class="glyphicons glyphicons-eye-open" title='Edit'></i>
        <% end %>
     </td>

Answer 3

You need to do other things to work,

Check this tutorial: http://www.erikminkel.com/2013/09/01/twitter-bootstrap-3-in-a-rails-4-application/

Answer 4

Since stylesheet is under /assets in Rails. In glyphicon.css , fonts need to be replaced with assets . After this change, glyphicon PRO starts working!