Solved

Bootstrap Glyphicons and theme for wordpress

Posted on 2016-08-29
5
31 Views
Last Modified: 2016-09-17
Hi,

I'm developing a theme for wordpress and I'm trying to use the Glyphicons that comes with Bootstrap but I can't make it work, I have tried many things without succeed.

I'm using bootstrap 3.3.7 with sass, my fonts folder is theme_name/fonts/bootstrap/....
My css file is in the root of my theme folder,
The Glyphicons path on the css is showing  src: url(/fonts/bootstrap/glyphicons-xxx.....

I would appreciate any help.

Thanks
0
Comment
Question by:GeorgeTowers
  • 3
5 Comments
 
LVL 9

Accepted Solution

by:
Prasadh Baapaat earned 500 total points (awarded by participants)
ID: 41775349
If you are using bootstrap 3.3.7 there will be 3 folders in ROOT of the dist folder you downloaded.

copy all 3 folders and paste them in your TEMPLATE folder where you STYLE.CSS file resides.

so now if you want to use the Glyphicons into your STYLE.CSSin root.. you will have to import the fonts first & then use them as below:

@font-face { .... }  and the path should be like below:

src: url('fonts/glyphicons-halflings-regular.eot');

You can copy paste the entire Glyphicon css code from bootstrap and just remove the "../" from the source path and add to your style.css in root

hope this helps.

Thanks,
Prasadh
1
 

Author Comment

by:GeorgeTowers
ID: 41775389
I tried change the path from _bootstrap-variables.scss but it didn't worked, I overwrites the path to the fonts copying it to my root css and now is working.

Thanks
0
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41775401
great :)
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41775464
View your source file
Click on the links to the fonts and see if it loads.
Failing that post your rendered output.
1
 
LVL 9

Expert Comment

by:Prasadh Baapaat
ID: 41802907
its a good solution
0

Featured Post

Free camera licenses with purchase of My Cloud NAS

Milestone Arcus software is compatible with thousands of industry-leading cameras for added flexibility. Upon installation on your My Cloud NAS, you will receive two (2) camera licenses already enabled in the software. And for a limited time, get additional camera licenses FREE.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now