Menu
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!
237
Free Alternatives to Glyphicons You can use both Font Awesome and Github Octicons as a free alternative for Glyphicons. Bootstrap 4 also switch from Less to Sass so you might integrate the font's Sass (SCSS) into your build process, to create a single CSS file for your projects.
Font Awesome works just as well without Bootstrap. Copy the font-awesome directory into your project.
js. import React, { Component } from 'react'; import { Glyphicon } from 'react-bootstrap'; class Star extends Component { constructor(props){ super(props); this. state = {star: this. props.
Bootstrap 4 does not have its own icon library (Glyphicons from Bootstrap 3 are not supported in BS4). However, there are many free icon libraries to choose from, such as Font Awesome and Google Material Design Icons.
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).
113
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:
Download Font Awesome package;
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;
Include <link rel="stylesheet" href="path/to/css/font-awesome.min.css"> in the <head>of your HTML;
Choose icons from the icon library and put them into your app just as you would Bootstrap's glyphicons.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
