shakee93 / vue-toasted

🖖 Responsive Touch Compatible Toast plugin for VueJS 2+
https://shakee93.github.io/vue-toasted/
MIT License
2.21k stars 194 forks source link

FontAwesome Brand how to use? #184

Open flamendless opened 3 years ago

flamendless commented 3 years ago

Hi, I want to use both the material and fontawesome iconpack, material works, but the fontawesome does not

import Toasted from "vue-toasted"
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome"
import {library, dom} from "@fortawesome/fontawesome-svg-core"
import {faExclamationTriangle} from "@fortawesome/free-solid-svg-icons"
import {faFontAwesome} from "@fortawesome/free-brands-svg-icons"
import router from "./router"
import "../node_modules/material-icons/iconfont/material-icons.css"

library.add(faExclamationTriangle);
library.add(faFontAwesome);
dom.watch();
Vue.component("font-awesome-icon", FontAwesomeIcon);

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(Toasted);

Here's the usage:

                this.$toasted.show("test: ", {
                    iconPack: "fontawesome",
                    icon: "font-awesome",
                    position: "top-right",
                    duration: "3000",
                    keepOnHover: true,
                    closeOnSwipe: true,
                    action: {
                        text: "Copy",
                        onClick: () => {
                        }
                    }
                });

ive tried fab-font-awesome, fas font-awesome, fa font-awesome but to no avail

rlightner commented 3 years ago

Try changing the iconPack to custom-class?

flamendless commented 3 years ago

Try changing the iconPack to custom-class?

Doesn't work either. Nothing is shown.

Shamzic commented 3 years ago

Hello, I was facing the same problem. I found the solution with this answer working for me :

https://github.com/shakee93/vue-toasted/issues/57#issuecomment-506024735