Bootstrap glyphicons without changing fonts

1
votes

I am using Bootstraps glyphicons, including them like this:

 <!-- Load Bootstrap CSS (Flatly) and Javascript -->
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Before I loaded the glyphicons CSS file my fonts were fine. I did not set the font, instead using whatever Bootstrap or jQuery sets the font by default.

Now I have included that glyphicon CSS file, my fonts have changed. Can I utilize the glyphicons whilst ignoring the fonts?

2
csstwitter-bootstraptwitter-bootstrap-3glyphicons
They both have font-family: sans-serif set on html. Can you post a link or better yet a fiddle showing this behavior? - feitla
See also: getbootstrap.com/customize - dreftymac

2 Answers

2
votes

As you can see here http://www.bootply.com/5Amv5odg7X you don't need to load the glyphicons separately, just be sure to load stock Bootstrap before flatly, and you're good to go.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">

Also, it's usually considered best practice load your .js files after all html content, so it doesn't impact page load.

1
votes

You are using a custom version of Bootstrap css that already includes the icons and imports a custom Google font. Check the file you're linking to here: 

<link rel="stylesheet" href="http://bootswatch.com/flatly/bootstrap.min.css">

This file contains all of the styles for the glyphicons embedded in it, so no need to separately add the link to the cdn for <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">.

As for you fonts "changing", the first line in this file imports the Lato font from Google and sets as the body font. If you don't want to use the custom font, download the flatly css file (instead of linking to the remote file) and remove the import statement at the top of the css file. Or, override the styles in your own css file. (Better to do the former, as it would be a waste to have your site visitors download the Google fonts, if you're not using them).