I want to use Fontawesome 5 Icons with VuetifyJs. Is that possible? which npm package for fontawesome should I use? because no one worked for me.
It is really confusing for me as an inexperienced VuetifyJs developer to use it, with the lack of any clear steps in the documentation of VuetifyJs.
From docs:
Font Awesome is also supported. Simply use the fa- prefixed icon name.
Please note that you still need to include the Font Awesome icons in
your project.
Release notes:
Things we added
v-icon now supports FontAwesome 5
You probably just need to include it in your index.html inside <head> or so
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
Then use like <v-icon>fa-search</v-icon>
To bring across my Vue specific answer, to get Font Awesome 5 working with Vuetify.js I needed the following setup in main.js:
import { library } from '#fortawesome/fontawesome-svg-core'
import { faCode } from '#fortawesome/pro-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
library.add(faCode)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Then I use the imported icon on the template level:
<v-btn fab dark small color="black" v-on:click="addCodeBlock">
<font-awesome-icon :icon="['fas', 'code']"/> // <-- This replaces <v-icon>fa-code</v-icon>
</v-btn>
Install
yarn add --dev #fortawesome/fontawesome-free
// or
npm i --save-dev #fortawesome/fontawesome-free
Import
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.use(Vuetify, {
iconfont: 'fa'
})
Use
<v-icon>fas fa-lock</v-icon>
Related
The issue is pretty much the same as the title. I am on Vuetify's 1.5.24 version and I am currently trying to create a button with an icon inside it as per mentioned in the vuetify documentation.
<v-btn icon color="dark"><v-icon>filter-variant</v-icon></v-btn>
But what I end up with is an invisible button that has nothing displayed inside it. I am using the same code provided in the documentation but nothing worked.
I have already tried redoing my installation of mdi. Currently, my local environment of the front end is running in intellij in case the issue can be linked to that.
Have you tried to add:
mdi
the following code should work if you are using vuetify, also you can look at their documentation here
<v-btn icon color="dark" >
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
Well, the step-to-step procedure is already mentioned in Vuetify 1.5.x documentation, however, here are some quick steps you can follow to set up the icons-
Straightforward way
1. Install material design icons-
$ yarn add #mdi/font -D
// OR
$ npm install #mdi/font -D
2. Then import the library where you initialize the Vuetify.
// Ensure you are using css-loader
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'mdi'
})
After following the above steps, you can use the icons in your template like this.
<v-btn icon><v-icon>mdi-filter-variant</v-icon></v-btn>
Recommended way
While working on a project, it's best practice to move icons in a separate file for re-usability purposes. Here is how you can do this-
1. Create a file icons.js under your src folder and put icons inside it in an Object key-value format like this-
icons.js
export const custom_icons = {
"filter_variant": "mdi-filter-variant",
"filter_remove": "mdi-filter-remove",
...
...
// other icons in same format
}
2. Import the custom icons in the file where you initialize the Vuetify-
// Ensure you are using css-loader
import '#mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
import { custom_icons } from "#/icons.js"
Vue.use(Vuetify, {
iconfont: 'mdi',
icons: custom_icons,
})
After following the above 2 steps, you can use icons in your template like this-
<v-btn icon><v-icon>$vuetify.icons.filter_variant</v-icon></v-btn>
This could be resolved by using mdi stylesheet as Material Design Icons aims to cover the gaps Google left with their set in Material icons library and allow a lot more community integration.
Live Demo :
Vue.use(Vuetify);
var vm = new Vue({
el: "#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.1.96/css/materialdesignicons.min.css" />
<link rel="stylesheet" href="https://unpkg.com/vuetify#0.14.8/dist/vuetify.min.css"/>
<div id="app">
<v-btn icon color="indigo">
<v-icon>star</v-icon>
</v-btn>
<v-btn icon color="dark">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</div>
I fully read the docs.
I installed NPM dependencies and then in my index.js:
import { library, icon } from '#fortawesome/fontawesome-svg-core'
import { faPlus } from '#fortawesome/free-solid-svg-icons'
library.add(faPlus)
And in my HTML
<i class="fa-solid fa-plus"></i>
But the icon is not rendered.
What am I missing? I am using webpack 5.
You need to import dom before use dom.watch()
import { dom } from '#fortawesome/fontawesome-svg-core'
I was missing dom.watch()
without dom.watch(), automatic replacement of your Font Awesome icons
won’t work in the rendered page!
import { dom, library, icon } from '#fortawesome/fontawesome-svg-core'
import { faPlus } from '#fortawesome/free-solid-svg-icons'
library.add(faPlus)
dom.watch()
They don't mention in the docs. Now it's working and the bundle size is much lower.
Visit Next.js and notice the page request in the network tab. Preview shows not just the HTML but completely pre-styled page.
When we use Styled-Components and Material-UI they have exposed ServerStyleSheet which is used for serving the required styles for the first render within the HTML.
import { ServerStyleSheet } from 'styled-components'
import { ServerStyleSheets } from '#material-ui/core/styles'
How can we achieve same output when using react-bootstrap or custom css like test.css?
Do you care if its a test.css or React bootstrap - Instead why not just inline all critical stylesheets?
It might be worth trying out their experimental feature
Add experimental: { optimizeCss: true } to next.config.js
Install critters#0.0.7 as a dependency
Via How to inline CSS in the head tag of a NextJS project?
Add your style file on the the _app file, you can create this file inside the pages directory in nextjs
import { AppProps } from "next/app";
import 'bootstrap/dist/css/bootstrap.min.css';
import "../your_style.css";
function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
export default App;
for react-bootstrap , you need to add npm i react-bootstrap bootstrap
Nextjs allows you to display SSG/SSR pages and javascript-disabled
users will still be able to see your app but the layout will be messy
if you use react-bootstrap components to build your layout.
To use react-bootstrap at SSR:
Install :
npm i react-bootstrap bootstrap
Import bootstrap styles in your _app.js:
import 'bootstrap/dist/css/bootstrap.min.css';
You can then use your react-bootstrap components as you would do in reactjs:
import {Container, Row, Col} from 'react-bootstrap';
const Layout = () => (
<>
<Container fluid>
<Row>
<Col>
<p>Running on Next.js at SSR</p>
</Col>
</Row>
</Container>
</>
);
export default Layout;
use Tailwind css
https://tailwindcss.com/
We can simply use classes and it make everything super easy for you design
I am trying to find the best solution for overriding the default 'Nova' theme used for Prime React. I am aware they have a theme designer available to purchase however I would ideally like to not use that.
Previously I was having a scss file with every tsx file in my react application. I was using lines such as -
.p-dropdown-trigger {
background-color: brown !important;
margin-left: 5px !important;
}
I was basically putting !important everywhere and it began to get very messy.
I have thought about commenting out the import for the Prime React theme in my index.tsx file
// import 'primereact/resources/themes/nova/theme.css';
And importing my own scss instead..
import './styles/Override.scss';
This makes the styling disappear completely and the page looks like it's purely html. I am thinking maybe I should copy all the code from the Nova theme file and then slowly start adjusting it in the override file.
Has anyone got a better way or any ideas?
Thanks
One option like you said is to copy all of the css over, and then hide their import. That may be more work than you need depending on what you're trying to do.
I would probably rather create an override.scss and specifically overwrite rules, which with scss nesting shouldn't get too crazy. But one tip to avoid using !important is to be more specific with the way you target HTML elements. For instance, if there is a CSS rule of
body header ul a { color: pink; }
then you can override a rule by being more specific and write:
body header ul li > a { color: blue; }
However if the rule you're trying to overwrite has !important in it, then you'll have to use !important in your new rule overwrite it.
Hmm, maybe I could help more if I had access to more code e.g. in codesandbox.io.
Do you try some modular CSS solution? Like Styled-jsx or Styled-Components?
If you would like to use styled-components, this answer could be helpful. PrimeReact and styled-component
A different solution could be, link the stylesheet with PrimeReact before your own stylesheet (inside of your HTML). This solution will require a deep analysis of the style implementation by the webpack.
Hope I could help somehow :)
Later CSS imports that come after the theme will override the templates as the last CSS rule has higher specificity (precedence) in CSS
In the following of a create-react-app index.tsx (typescript .js), index.css will override the imported prime themes but CSS imports in the child React "App" component will not override the theme because it is imported first. (And the last applicable CSS is the one that gets used unless you override with !important.)
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
import "../node_modules/primereact/resources/primereact.min.css";
import "../node_modules/primeicons/primeicons.css";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
You can make your React component's CSS (like "App") override the React Prime theming by importing the theme CSS as the first thing, then components after making their CSS later and higher precedence.
import "../node_modules/primereact/resources/themes/saga-blue/theme.css";
import "../node_modules/primereact/resources/primereact.min.css";
import "../node_modules/primeicons/primeicons.css";
import React from "react";
import ReactDOM from "react-dom";
import reportWebVitals from "./reportWebVitals";
import App from "./App";
import "./index.css";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Im trying to use a primary button from bootstrap in my Angular module. But it seems to not work.
Heres what I've done so far.
npm install ngx-bootstrap --save
Added bootstrap module and imports.
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot(),...]
exports: [BsDropdownModule, TooltipModule, ModalModule]
Now in the Module I use this code for a button:
<button type="submit" class="btn btn-primary">Submit</button>
but the button is still the standard html button. Not a blue submit button. Did I forget any steps when importing bootstrap. In the node_modules structure I can find bootstrap in there with the necessary .js and .css files.
Thanks for help.
You don't need to import modules, instead you need to attach styles from bootstrap. import them in the styles.css file or configure in the styles section of the angular.json file
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
]
or your relative/absolute path
Looks like in your case bootstrap is just about styling. Pure CSS styling of your HTML elements. Ngx-bootstrap it is about Angular components(the way you are decomposing your application). It's just like regular bootstrap with a jquery for interactivity but in an Angular world.
To get just bootstrap styles in your application you need to run command:
npm install bootstrap
Then put these source files into angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
]
And rebuild you project.
We have two options to import the CSS from Bootstrap that was installed from NPM. One by configuring in angular.json and second by importing directly in src/style.css or src/style.scss. You can go through this https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/#3-importing-the-css and learn more about how to do that.