I have a website, setup with webpack. I added Font Awesome Pro and configured the global token for it. So the Pro Icons are working.
But some doesn't, like fa-github or fa-twitter. And these are actually even free icons. A few days ago they worked.
Here's my code how I set everything up:
Package.json:
"dependencies": {
"#fortawesome/fontawesome": "^1.1.5",
"#fortawesome/fontawesome-free-brands": "^5.0.9",
"#fortawesome/fontawesome-pro-light": "^5.0.9",
"#fortawesome/fontawesome-pro-regular": "^5.0.9",
"#fortawesome/fontawesome-pro-solid": "^5.0.9",
"#fortawesome/fontawesome-pro-webfonts": "^1.0.5",
}
main.scss:
$fa-font-path: "~#fortawesome/fontawesome-pro-webfonts/webfonts";
#import '~#fortawesome/fontawesome-pro-webfonts/scss/fontawesome.scss';
#import '~#fortawesome/fontawesome-pro-webfonts/scss/fa-light.scss';
webpack:
resolve: {
alias: {
'#fortawesome/fontawesome-pro-solid$': '#fortawesome/fontawesome-pro-solid/shakable.es.js',
'#fortawesome/fontawesome-pro-regular$': '#fortawesome/fontawesome-pro-regular/shakable.es.js',
'#fortawesome/fontawesome-pro-light': '#fortawesome/fontawesome-pro-light/shakable.es.js'
}
},
<i class="fal fa-check"></i> // Does work
<i class="fal fa-github"></i> // Does not work
<i class="fal fa-twitter"></i> // Does not work
What am I missing? Do I have to import another CSS file for these? I didn't find any.
Edit: Added photo of folder structure:
Alternatively,
You can import Font Awesome icons the Javascript way.
import fontawesome from '#fortawesome/fontawesome'
import brands from '#fortawesome/fontawesome-free-brands'
fontawesome.library.add(brands)
You will need the #fortawesome/font-awesome-pro-brands package for this.
Use <i class="fab fa-github"></i> and <i class="fab fa-twitter"></i>
You cannot use fal for the class since there are no social icons in the font-awesome-pro-light set.
See: https://fontawesome.com/icons?d=gallery&q=github&s=light
Related
I want to use Bootstrap 5 with Vue 3. As Bootstrap 5 uses vanilla JS (no JQuery), can I use Bootstrap 5 directly in a Vue 3 project (without using Bootstrap-Vue)? Can someone guide me how to use Bootstrap 5 with Vue 3?
Bootstrap 5 no longer needs jQuery so it's easier to use with Vue, and no longer requires a library like bootstrap-vue.
Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package.json...
npm install --save bootstrap
npm install --save #popperjs/core
Next, add the Bootstrap CSS and JS components to the Vue project entrypoint (ie: src/main.js)...
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
Then, the simplest way to use Bootstrap components is via the data-bs- attributes. For example here's the Bootstrap Collapse component...
<button
class="btn btn-primary"
data-bs-target="#collapseTarget"
data-bs-toggle="collapse">
Bootstrap collapse
</button>
<div class="collapse py-2" id="collapseTarget">
This is the toggle-able content!
</div>
Demo with Navbar component
Or, you can import any Bootstrap components and "wrap" them as Vue components. For example here's the Popover component...
import { Popover } from bootstrap;
const popover = Vue.component('bsPopover', {
template: `
<slot/>
`,
props: {
content: {
required: false,
default: '',
},
title: {
default: 'My Popover',
},
trigger: {
default: 'click',
},
delay: {
default: 0,
},
html: {
default: false,
},
},
mounted() {
// pass bootstrap popover options from props
var options = this.$props
var ele = this.$slots.default[0].elm
new Popover(ele,options)
},
})
<bs-popover
title="Hello Popover"
content="This is my content for the popover!"
trigger="hover">
<button class="btn btn-danger">
Hover for popover
</button>
</bs-popover>
Demo |
Read more
Yes, you can use Bootstrap without Bootstrap-Vue.
Install these two packages with npm:
npm install --save #popperjs/core bootstrap#next
Import Bootstrap to src/main.js:
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
Example usage for Vue Template:
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Check Bootstrap
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Result:
While the Bootstrap CSS can be used with any framework (React, Vue, Angular, etc), the Bootstrap JavaScript is not fully compatible with them.
Here's the official reasoning from the Bootstrap 5 docs:
While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.
The docs state to use an alternative framework-specific package instead of the Bootstrap JavaScript such as React Bootstrap, BootstrapVue, and ng-bootstrap.
Unfortunately, BootstrapVue is only compatible with Vue2/Nuxt2 and there is no version available for Vue3/Nuxt3 yet.
It's easy to implement this once you understand how Bootstrap modals work. Bootstrap modals have a div element with a class of modal fade. When it is triggered, this element gets the show and d-block class as well. In addition, the body tag gets an additional class of modal-open. When the modal is closed, this process is reversed. Understanding this, we can easily implement Bootstrap 5 modals in one's code:
Import Bootstrap 5's CDN in your code. Add both the CSS and JS to your code.
Our sample Single Page Component will look like this:
<template>
<div>
<p>Test modalnow</p>
<div>
<button type="button" class="btn btn-primary" #click="modalToggle">My Modal</button>
<div
ref="modal"
class="modal fade"
:class="{ show: active, 'd-block': active }"
tabindex="-1"
role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="modalToggle">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<div v-if="active" class="modal-backdrop fade show"></div>
</div>
</div>
</template>
Here we are using the basic Bootstrap 5 modal.
<script>
export default {
data() {
return {
active: false,
}
},
methods: {
modalToggle() {
const body = document.querySelector("body")
this.active = !this.active
this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
},
},
}
</script>
Here, we have a variable active which is initially set false. So modal will not show up on page load. On clicking a link, we use a method to toggle this variable. This will remove the show attribute and the d-block class from our modalm and remove the modal-open property from the body tag.
bootstrap 5 must have popper for run , try with this npm :
npm install --save bootstrap
npm i #popperjs/core
please add this package :
npm install --save #popperjs/core
To make bootstrap work with SSR you can not:
import "bootstrap";
as others have suggested since it will give you an error:
document is not defined
This is not an optimal solution but it will work
npm install bootstrap
And only import the bootstrap scss in your styles tag so you have access to the bootstrap variables etc.
<style lang="scss">
#import 'bootstrap/scss/bootstrap';
.sticky-sidebar {
z-index: $zindex-sticky;
...
}
</style>
And then just add the bootstrap bundle to your header. Note: you don't have to add the css now that it is imported in your component.
I want to use Bootstrap 5 with Vue 3. As Bootstrap 5 uses vanilla JS (no JQuery), can I use Bootstrap 5 directly in a Vue 3 project (without using Bootstrap-Vue)? Can someone guide me how to use Bootstrap 5 with Vue 3?
Bootstrap 5 no longer needs jQuery so it's easier to use with Vue, and no longer requires a library like bootstrap-vue.
Install bootstrap as you would any other JS module in the Vue project using npm install or by adding it to the package.json...
npm install --save bootstrap
npm install --save #popperjs/core
Next, add the Bootstrap CSS and JS components to the Vue project entrypoint (ie: src/main.js)...
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
Then, the simplest way to use Bootstrap components is via the data-bs- attributes. For example here's the Bootstrap Collapse component...
<button
class="btn btn-primary"
data-bs-target="#collapseTarget"
data-bs-toggle="collapse">
Bootstrap collapse
</button>
<div class="collapse py-2" id="collapseTarget">
This is the toggle-able content!
</div>
Demo with Navbar component
Or, you can import any Bootstrap components and "wrap" them as Vue components. For example here's the Popover component...
import { Popover } from bootstrap;
const popover = Vue.component('bsPopover', {
template: `
<slot/>
`,
props: {
content: {
required: false,
default: '',
},
title: {
default: 'My Popover',
},
trigger: {
default: 'click',
},
delay: {
default: 0,
},
html: {
default: false,
},
},
mounted() {
// pass bootstrap popover options from props
var options = this.$props
var ele = this.$slots.default[0].elm
new Popover(ele,options)
},
})
<bs-popover
title="Hello Popover"
content="This is my content for the popover!"
trigger="hover">
<button class="btn btn-danger">
Hover for popover
</button>
</bs-popover>
Demo |
Read more
Yes, you can use Bootstrap without Bootstrap-Vue.
Install these two packages with npm:
npm install --save #popperjs/core bootstrap#next
Import Bootstrap to src/main.js:
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
Example usage for Vue Template:
<div class="dropdown">
<button
class="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Check Bootstrap
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
Result:
While the Bootstrap CSS can be used with any framework (React, Vue, Angular, etc), the Bootstrap JavaScript is not fully compatible with them.
Here's the official reasoning from the Bootstrap 5 docs:
While the Bootstrap CSS can be used with any framework, the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.
The docs state to use an alternative framework-specific package instead of the Bootstrap JavaScript such as React Bootstrap, BootstrapVue, and ng-bootstrap.
Unfortunately, BootstrapVue is only compatible with Vue2/Nuxt2 and there is no version available for Vue3/Nuxt3 yet.
It's easy to implement this once you understand how Bootstrap modals work. Bootstrap modals have a div element with a class of modal fade. When it is triggered, this element gets the show and d-block class as well. In addition, the body tag gets an additional class of modal-open. When the modal is closed, this process is reversed. Understanding this, we can easily implement Bootstrap 5 modals in one's code:
Import Bootstrap 5's CDN in your code. Add both the CSS and JS to your code.
Our sample Single Page Component will look like this:
<template>
<div>
<p>Test modalnow</p>
<div>
<button type="button" class="btn btn-primary" #click="modalToggle">My Modal</button>
<div
ref="modal"
class="modal fade"
:class="{ show: active, 'd-block': active }"
tabindex="-1"
role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="modalToggle">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
</div>
</div>
</div>
<div v-if="active" class="modal-backdrop fade show"></div>
</div>
</div>
</template>
Here we are using the basic Bootstrap 5 modal.
<script>
export default {
data() {
return {
active: false,
}
},
methods: {
modalToggle() {
const body = document.querySelector("body")
this.active = !this.active
this.active ? body.classList.add("modal-open") : body.classList.remove("modal-open")
},
},
}
</script>
Here, we have a variable active which is initially set false. So modal will not show up on page load. On clicking a link, we use a method to toggle this variable. This will remove the show attribute and the d-block class from our modalm and remove the modal-open property from the body tag.
bootstrap 5 must have popper for run , try with this npm :
npm install --save bootstrap
npm i #popperjs/core
please add this package :
npm install --save #popperjs/core
To make bootstrap work with SSR you can not:
import "bootstrap";
as others have suggested since it will give you an error:
document is not defined
This is not an optimal solution but it will work
npm install bootstrap
And only import the bootstrap scss in your styles tag so you have access to the bootstrap variables etc.
<style lang="scss">
#import 'bootstrap/scss/bootstrap';
.sticky-sidebar {
z-index: $zindex-sticky;
...
}
</style>
And then just add the bootstrap bundle to your header. Note: you don't have to add the css now that it is imported in your component.
I'm not that experienced with css and webprogramming to start with.
I want to enable the Content-Security-Policy header for my site but it warns me about a couple of lines for using inline stuff.
The lines looks like this:
<li><i class="fa fa-phone"></i></li>
<li><i class="fa fa-facebook"></i></li>
I'm trying to figure out how I would move the style= parameter to the css stylesheet.
In the CSS-file, can I just add something like this?
facebookbutton {
background: #2e39a4
}
phonebutton {
background: #9fa6ac
}
And then do something like this?
<li><a href="contakt" style="css-file-somehow" .....
Or is this done in a totally different way?
In HTML The tag will have class attribute
<i class="fa fa-facebook"></i>
The Class will have styles defined in CSS like below
.facebookbutton{
background:#2e39a4;
}
How do I properly Alisas a font awesome class such as fa fa-users to user ?
I am developing an Ext application, and I need to use font awesome icons, the following works for me:
<i class="fa fa-users"></i>
However the icon to use is database result driven, hence I wish to use an alias class for fa fa-users, then I can switch classes dynamically. How do I do this.
Already tried:
Method 1
CSS:
.user
{
font-family: FontAwesome;
content: "\f095";
}
Method 2
Jquery Approach to alias class
$document.ready(function(){
$('.users').addClass('fa fa-users');
}):
In both cases using as:
<i class="user></i>
But no icon appears, I just cant figure out what I am missing.
you have to addClass to i instead
$('.users i').addClass('fa fa-users');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div class="users">
<i></i>
</div>
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing