Menu
I'm working on an Angular 4 Project using Bootstrap 4 with Sass, and I want to use the glyphicons but when I use the following code:
<button class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-thumbs-up"></span>Like</button>
For example, when making a "like" button, the icon doesn't show.
I configured the project to compile the SCSS stylesheets with the ng-serve command, my angular-cli.json looks like this:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "front-end-informatorio"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/scss/bootstrap.scss",
"../node_modules/bootstrap/scss/main.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
I tried linking this in my index.html:
<link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css"/>
It made the icons work, but also also changed the whole style of my project.
How do I achieve it without overlapping the styles?
980
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.
You don't have to do anything 'special' to load Bootstrap Glyphicons, except make sure your folder structure is set up appropriately. Note, you need both classes. The first class glyphicon sets up the basic styles while glyphicon-comment sets the specific image. I would just add one more thing.
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.
Where to find Glyphicons? Associated CSS rules are present within bootstrap. css and bootstrap-min. css files within css folder of dist folder.
Bootstrap 4 dropped Glyphicons support. (see: https://getbootstrap.com/docs/4.0/migration/#components)
This means that you'll need to use some other icon font, like Font Awesome.
<head>
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap + Font Awesome</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
</head>
<body>
<div class="container">
<!-- display 4 class makes the font size increase -->
<h1 class="display-4"><i class="fab fa-stack-overflow"></i></h1>
<p>That was easy! <i class="far fa-thumbs-up"></i></p>
<button type="button" class="btn btn-primary">Works also with buttons! <i class="fas fa-link"></i></button>
</div>
</body>
</html>The Font Awesome team is working on an Angular Font Awesome component. It is right now in pre-release, but you can find it here.
197
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
