20

My Client project using some basic HTML and CSS. But they like the Glyphicons on the Website menus. So i just tried to include Glyphicons with the Bootstrap CSS, it does, but the other css got affected after including the Bootstrap CSS.

So the question may be silly, I just want to include Glyphicons in client website menu links without bootstrap css.

Is that possible first? I know Glyphicons free will be available with Bootstrap Package.

And other things is that my client do not want me to include Bootstrap CSS since it is affecting page structure.

So is it possible to include Glyphicons without Bootstrap css or my own custom css?

Any help would be appreciated!

Raja
  • 3,477
  • 12
  • 47
  • 89
  • 1
    Alternative; `Font Awesone` – HddnTHA May 25 '16 at 22:00
  • 2
    You will have to buy the PRO version if you want to use it without bootstrap. – AndrewL64 May 25 '16 at 22:14
  • 2
    Definitely switch to http://fontawesome.io – Jeff Puckett May 25 '16 at 23:27
  • As far as I understand, using Glyphicons without Bootstrap is copyright infringement. Please don't do this, use a free alternative like Font Awesome instead. "Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible." - http://getbootstrap.com/components/#glyphicons – Nick McCurdy Mar 04 '17 at 09:16
  • Your question isn't silly; the way so many devs let Bootstrap wreak havoc on standard CSS is what's silly! There's a library I want to use that requires Glyphicons, but I don't want Bootstrap making my CSS FUBAR. It'd be better of Bootstrap only kicked in on elements with a particular class and their descendants, and I don't understand why this isn't the way Bootstrap works. (Just add the class to your `` element if you really want it to take over everything!) Maybe I'm just old—I've been using CSS for 20 years, and while I've kept up, I just still expect CSS3 to work a certain way. – Michael Scheper Jul 19 '17 at 18:02

6 Answers6

16

There's this:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">

However, if you want to conserve some bandwidth, you can load the fonts directly from a CDN and then inline the required CSS, like this:

<style>
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot');
  src: url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2') format('woff2'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff') format('woff'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
       url('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font: normal normal 16px/1 'Glyphicons Halflings';
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-right: 4px;
}
/* Add icons you will be using below */
.glyphicon-fire:before {
  content: '\e104';
}
.glyphicon-eye-open:before {
  content: '\e105';
}
</style>

You can see an example in the demo here ("Eye of Medusa" and "Rain of Fire" menu items).

thdoan
  • 18,421
  • 1
  • 62
  • 57
  • 2
    To downvoter: please provide constructive feedback if this solution is not working for you. – thdoan Mar 07 '17 at 02:46
  • It wasn't me who downvoted you, and I really hate people who downvote without leaving reason, too—the site even says to leave a comment! But your CDN link still stuffs up standard CSS (even though it claims to 'normalise' it), so it has essentially the same problem that Bootstrap does, and thus doesn't really answer the question. However, the explicit CSS you posted here doesn't have that problem, which is ultimately why I up-voted your answer—thank you! I disagree that it saves bandwidth, though. The whole point of CDNs is for browsers to cache libraries, and to take load off your web server. – Michael Scheper Jul 19 '17 at 18:46
  • @MichaelScheper thanks for the comment. This was quite awhile ago, but I think when I said "conserve some bandwidth" I meant instead of downloading the entire Bootstrap library just to use the icon fonts, they can just link directly to the fonts. – thdoan Jul 20 '17 at 09:43
14

I was trying to get Bootstrap's glyphicons to work without installing the whole bootstrap.css file, but half way through it became too much work and I gave up. Instead, I came across Font Awesome. Bootstrap 3 itself uses it (or used to use). It is designed to be used as a standalone so it's really simple and light. All you have to do is:

  1. Download Font Awesome package;

  2. Copy font-awesome.min.css into your css folder and all of the fonts files from Font Awesome's fonts folder into your fonts folder;

  3. Include <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in the <head>of your HTML;

  4. Choose icons from the icon library and put them into your app just as you would Bootstrap's glyphicons.

Arthur Tarasov
  • 3,517
  • 9
  • 45
  • 57
  • 1
    Thanks this helped a lot! –  Oct 25 '16 at 14:03
  • 1
    Perhaps I'm mising something, but I don't see how this can work. FontAwesome uses different classes, so if you're using a library that expects GlyphIcon classes, e.g. ``, nothing will appear. I like using FontAwesome, but unfortuantely, the third-party library I want to use expects GlyphIcons, even the non-Bootstrap version. (Perhaps this is an oversight on the library's author, but I'm trying to work around it.) – Michael Scheper Jul 19 '17 at 18:14
  • The question was about how to use the Bootstrap Glyphicons without the rest of Bootstrap and NOT how to replace it with something else. – Andreas Hinderberger Jul 27 '20 at 14:15
  • I think this is a great answer which is useful to folks who might be reading the question for slightly different reasons (like me!). There appear to have been some changes and now the font-awesome instructions say to copy `all.min.css` to your `css` directory and the contents of the `webfonts` directory to your `webfonts` directory. `all.min.css` expects the font files to be in `../webfonts` so make sure they are there (and not `../fonts` as suggested above!) ([reference](https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) - see Using Web Fonts with CSS) – jenniwren Jan 19 '22 at 01:51
11

Here is a bower package that you can use only glyphicons out of entire bootstrap.

Check this github repository https://github.com/ohpyupi/glyphicons-only-bootstrap

or

bower install glyphicons-only-bootstrap

EDIT

Now it's possible to download the package through NPM.

npm install glyphicons-only-bootstrap
supergentle
  • 1,001
  • 1
  • 14
  • 33
  • 3
    Since I've already left a ranty comment today (see above): People who downvote answers without leaving a comment explaining why should be banned from Stack Exchange! What happened when they tried following this advice? Or did they ignorantly or callously downvote it because they don't use Bower? – Michael Scheper Jul 19 '17 at 18:05
  • 1
    There are many people fooled by something just because of its fanciness and how much it is sophisticated. I totally agree with you. It's becoming more tricky to ask a questions and leave answer in stackover flow. I am just happy that around 400 people are visiting the repo per two weeks and getting what they want for daily development. – supergentle Aug 04 '17 at 19:43
1

Yes, you only need download from this page: http://glyphicons.com/ (Free option below)

EDIT: In this thread more info about this: Bootstrap 3 Glyphicons CDN

Community
  • 1
  • 1
Alejandro Garrido
  • 381
  • 1
  • 3
  • 15
  • Yes. But the free version doesn't have css option, only png available. For CSS version again, i need to go Pro version or Bootstrap. Thanks. – Raja May 25 '16 at 22:08
  • 1
    And is not possible take the css and font files from bootstrap and only use this? I'm not sure about the viability of this, but is a idea. Or you can try to use Font Awesome like has sayed to you HdddnTHA – Alejandro Garrido May 25 '16 at 22:14
1

I had the same problem with Bootstraps, I just need an arrow but mess it up when added it.

So I moved to FontAwesome, worked beautifully!

You can also get the CDN that looks like this:

<script src="https://use.fontawesome.com/2734t3et304.js"></script>

You need to get your own! :)

George
  • 11
  • 1
  • This is effectively the same answer as Arthur's above. https://stackoverflow.com/a/39436226/1450294 Thanks for your advice, but please see my comment there for why I don't think it is helpful. (I won't downvote you and take away your one reputation point. I do encourage you to read other answers before writing your own, though, and familiarise youself with StackExchange customs.) – Michael Scheper Jul 19 '17 at 18:26
0

go to glyphicons cheatsheet [https://glyphicons.bootstrapcheatsheets.com/]

li:before {
font-family: "Glyphicons Halflings";
content: "\e013";
/* other code as per need*/
}
Naved Khan
  • 1,699
  • 16
  • 13