How to make the Twitter Bootstrap Glyphicons work with Wordpress?

Question

I know there are a lot of questions in stackoverflow. But none of them has solved my problem.

But it didn't work for me.

My website http://mywebsite.com doesn't show icons. I added everything.

score 2 · Accepted Answer · answered Mar 01 '14 at 08:29

2

You are overwriting the Glyphicon font-family. You must include Bootstrap's css file first before including yours.

answered Mar 01 '14 at 08:29

tinfoilboy

I moved my custom css after bootstrap's css. Nothing changed. – SNaRe Mar 01 '14 at 08:33
You are also overriding the glyphicon class, you must change html * to just html in your custom.css file. – tinfoilboy Mar 01 '14 at 08:33
Works like a charm. But I will need your 1 more help. Since I will remove this, I gotta put this to somewhere so I have wrapper called 'wrap', How I will force to set the font to 'Open Sans' as I did with HTML – SNaRe Mar 01 '14 at 08:40
The font is Open Sans, you are essentially setting every font besides the ones that are explicitly set to Open Sans. – tinfoilboy Mar 01 '14 at 08:41
I want to force it since I use different CSS snipets and they may have different font. Forcing solves my problem. I am lazy about it. How will I force it without having problems with glyphicon. – SNaRe Mar 01 '14 at 08:43
You would just do #wrap { font-family: 'Open Sans' sans-serif; } – tinfoilboy Mar 01 '14 at 08:45
But it won't override any other fonts that defined under wrap. Would putting '!important' solve my problem? – SNaRe Mar 01 '14 at 09:17
@SNaRe Those fonts are already defined in the respective CSS class, you could just do `#wrap * { font-family: 'Open Sans', sans-serif; }` then do `#wrap glyphicon { font-family: 'Glyphicons Halflings'; }`. – tinfoilboy Mar 01 '14 at 09:23

score 2 · Answer 2 · answered Mar 01 '14 at 08:33

2

You need to remove this style:

html * {
    font-family: 'Open Sans', sans-serif !important;
}

from custom.css which is located at:

http://serhat.gen.tr/wp-content/themes/wp-bootstrap-master/css/custom.css

answered Mar 01 '14 at 08:33

Felix

What can I do about it? – SNaRe Mar 01 '14 at 08:34
Go to that file location and search for the style above, then remove it or just keep `html` instead of `html *` – Felix Mar 01 '14 at 08:34
I want to force it since I use different CSS snipets and they may have different font. Forcing solves my problem. I am lazy about it. How will I force it without having problems with glyphicon. – – SNaRe Mar 01 '14 at 08:44

2 Answers2