CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapglyphicons
user938363
user938363

Reputation: 10350

Glyphicons Pro icon not showing correctly in Rails 4.2/Bootstrap

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:

enter image description here

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: enter image description here

What's missing in our process?

Upvotes: 0

Views: 395

Answers (4)

user938363
user938363

Reputation: 10350

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

Upvotes: 0

HudsonPH
HudsonPH

Reputation: 1868

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/

Upvotes: 1

vipin
vipin

Reputation: 2510

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>

Upvotes: 1

M. Karim
M. Karim

Reputation: 942

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.

Upvotes: 1

Related Questions