Solved

Bootstrap Glyphicons and theme for wordpress

Posted on 2016-08-29
5
71 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 10

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 10

Expert Comment

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

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 10

Expert Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Anchor Bookmark 6 32
phpmyadmin memory error 55 91
Wordpress -  Updating All Posts on Website 3 83
Change background images after 5 seconds. 12 46
This article discusses how to create an extensible mechanism for linked drop downs.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

739 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