I am using Vue 3 with Vuetify 3 and so far I can't manage to change the font from Roboto to Lato.
I am a beginner in SCSS, but I have created a file called /scss/main.scss:
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,400;0,700;1,400&display=swap');
$body-font-family: 'Lato';
which I import in main.js:
...
import '../scss/main.scss'
...
and then inside App.vue I have:
#app {
font-family: $body-font-family, sans-serif !important;
}
Am I missing something here?
I don't think that importing the scss into main.js is doing anything. Instead import it in the style tag of your App.vue.
Try the following in App.vue instead;
<template>
...
</template>
<style lang="scss">
#import("path to your scss/main.scss file")
#app {
font-family: $body-font-family, sans-serif !important;
}
</style>
Related
I have an Angular project with bootstrap 4.4.1, ag-grid 27.3 and a global style.scss file. I'm able to use bs icons by using the css classes in my typescript and html files.
Now i'm trying to change the checkbox font icon in ag-grid, from "\f106" to "\f272" of bootstrap. I see in the browser that the main two css classes involved with the font icon are:
The font-size and content properties specifically affect the icon (in pink by default)
So, I tried setting the icon css code, but no luck, the browser is not throwing an error but it's not showing it either.
Is it even possible to change that font icon? Do I need to import something to the style.scss?
Edit 1:
Tried all the approaches (sass, svg and javascript) from the docs and wasn't able to make work neither.
Sass:
Added
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
to index.html. Already had these imports in my style.scss:
#import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
#import "../node_modules/ag-grid-community/src/styles/ag-theme-material/sass/ag-theme-material-mixin.scss";
And this for changing the checkbox-checked icon
.ag-theme-material .ag-icon-checkbox-checked {
//tried all 3 combinations of font
//--ag-icon-font-family: 'Material Design Icons';
//--ag-icon-font-family: agGridMaterial;
//--ag-icon-font-family: "agGridMaterial";
--ag-icon-font-code-checkbox-checked: '\f00c';
}
Svg:
.ag-theme-material .ag-icon-checkbox-checked{
background: transparent url("https://www.ag-grid.com/example-assets/svg-icons/menu.svg") center/contain no-repeat;
color: transparent;
}
Javascript (GridOptions or Column Def):
#Input() gridOptions: GridOptions = {
...
icons: {
checkboxChecked: '<i class="bi bi-check2"/>',//boostrap font icon
},
...
}
Have a read of Ag-grid Custom Icon
You can use the custom icon font-family by inserting it in index.html via a <link> and importing it in custom.scss.
Example
index.html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"/>
custom.scss
.ag-theme-alpine {
--ag-icon-font-family: 'Font Awesome 5 Free';
--ag-icon-font-code-aggregation: '\f247';
--ag-icon-font-code-arrows: '\f0b2';
--ag-icon-font-code-asc: '\f062';
--ag-icon-font-code-cancel: '\f057';
--ag-icon-font-code-chart: '\f080';
--ag-icon-font-code-color-picker: '\f576';
--ag-icon-font-code-columns: '\f0db';
--ag-icon-font-code-contracted: '\f146';
--ag-icon-font-code-copy: '\f0c5';
--ag-icon-font-code-cross: '\f00d';
--ag-icon-font-code-desc: '\f063';
--ag-icon-font-code-expanded: '\f0fe';
--ag-icon-font-code-eye-slash: '\f070';
--ag-icon-font-code-eye: '\f06e';
--ag-icon-font-code-filter: '\f0b0';
--ag-icon-font-code-first: '\f100';
--ag-icon-font-code-grip: '\f58e';
--ag-icon-font-code-group: '\f5fd';
--ag-icon-font-code-last: '\f101';
--ag-icon-font-code-left: '\f060';
--ag-icon-font-code-linked: '\f0c1';
--ag-icon-font-code-loading: '\f110';
--ag-icon-font-code-maximize: '\f2d0';
--ag-icon-font-code-menu: '\f0c9';
--ag-icon-font-code-minimize: '\f2d1';
--ag-icon-font-code-next: '\f105';
--ag-icon-font-code-none: '\f338';
--ag-icon-font-code-not-allowed: '\f05e';
--ag-icon-font-code-paste: '\f0ea';
--ag-icon-font-code-pin: '\f276';
--ag-icon-font-code-pivot: '\f074';
--ag-icon-font-code-previous: '\f104';
--ag-icon-font-code-right: '\f061';
--ag-icon-font-code-save: '\f0c7';
--ag-icon-font-code-small-down: '\f107';
--ag-icon-font-code-small-left: '\f104';
--ag-icon-font-code-small-right: '\f105';
--ag-icon-font-code-small-up: '\f106';
--ag-icon-font-code-tick: '\f00c';
--ag-icon-font-code-tree-closed: '\f105';
--ag-icon-font-code-tree-indeterminate: '\f068';
--ag-icon-font-code-tree-open: '\f107';
--ag-icon-font-code-unlinked: '\f127';
--ag-icon-font-code-checkbox-checked: '\f00c';
--ag-icon-font-code-checkbox-unchecked: '\f00d';
}
.ag-theme-alpine .ag-icon,
.ag-theme-alpine .ag-checkbox-input-wrapper,
.ag-theme-alpine .ag-radio-button-input-wrapper {
/* Font Awesome requires bold on all icon elements */
font-weight: bold;
}
/* selectively replace the group and aggregation icons with Material Design Icons */
.ag-theme-alpine .ag-icon-group {
--ag-icon-font-family: 'Material Design Icons';
--ag-icon-font-code-group: '\F0328';
font-weight: normal;
color: red;
}
.ag-theme-alpine .ag-icon-aggregation {
--ag-icon-font-family: 'Material Design Icons';
--ag-icon-font-code-aggregation: '\F02C3';
font-weight: normal;
color: red;
}
I am trying to style specific mat input element in my application through external css file.
For example I have imported textfield.css file style.css file for styling.
so let me write some code below
<mat-form-field>
<input class="txtfieldwithBordergreen" formControlName="password" matInput type="Password" placeholder="password">
</mat-form-field>
So below is my html file with applied class "txtfieldwithBordergreen"
I want to control the properties of any text field by just applying this class where ever required.
so made textfield.css file and imported in style.css file
below is the code for textfield.css file
.mat-form-field-appearance-legacy .mat-form-field-label {
background-color: green !important;
}
and the textfield.css is included in styles.css
so below is style.css file
#import 'globalcss/textfield.css';
html, body { height: 100%; padding: 0; margin: 0; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
:root {
--primary-color: #fff;
--background-color: #e5e5e5;
--text-color: #2d2d2d;
}
this style will be applied to all matInputs but I want for specific input so I wrote like this
.txtfieldwithBordergreen .mat-form-field-appearance-legacy .mat-form-field-label {
background-color: green !important;
}
how ever I don't know the above code is not working...when I remove .txtfieldwithBordergreen Its working fine by applying to all mat inputs.
any clues where I am going wrong or any update required here?
P.S
I my aim is to build the pre css class like
textfield-smaller
textfield-big etc.. and just need to apply the class name to the mat inputs so that I dont need to go to change in the respective css files.
any help would be highly appreciated..!!
create a separate file called like textfield.css
import it in your style.css like
#import 'globalcss/textfield.scss';
put that file in globalcss folder make that folder under src so
src=>globalcss=>textfield.scss
now you can take any matInput and just add style like small-text-field see the class added below
<mat-form-field class="small-text-field">
<input matInput placeholder="Username">
</mat-form-field>
and the contents in the textfield.css file goes like
.mat-form-field.smallTextfield .mat-form-field-wrapper{
font-size: 10px;
width: 125px;
}
so in whole application wherever you have matInput if you apply this class it will be added but just note that as of now ng::deep is deprecated use the below directive in the ts file as
encapsulation: ViewEncapsulation.None
this will be used inside
#Component({selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
encapsulation: ViewEncapsulation.None})
I am using React with SASS.
For my components, I am using modular CSS, however, in my Layout.js file, I want to use a main.scss file.
My main.scssfile is working as when I add style to selectors such as body {} or p {}, they style these elements. It's the styles for classes that aren't seeming to come through. For instance, in my global.scss file, I have the following css
body {
margin: 0;
}
.marginsContainer {
width: 90%;
margin: auto;
padding: 100px;
}
The body is working. The .mainContainer isn't.
I am trying to use .mainContainer in my Layout.js file, like so
import Navbar from './Navbar';
import Head from 'next/head';
import '../global-styles/main.scss';
const Layout = (props) => (
<div>
<Head>
<title>Practise Site</title>
</Head>
<Navbar />
<div className="marginsContainer">
{props.children}
</div>
</div>
);
export default Layout;
What might be the problem here?
Are you using css-modules?
In that case, css-modules adds a hash at the end of the class name. You can avoid it by switching to the global scope for your class.
:global {
.marginsContainer {
width: 90%;
margin: auto;
padding: 100px;
}
}
A better solution is to use the class name with the hash, by importing the stylesheet like this.
import styles from '../global-styles/main.scss';
And setting the class name like this.
<div className={styles.marginsContainer}>
Use svg to create an icon font on iconmoon, name it sell-icon, copy the four files (sell-icon.eot\sell-icon.svg\sell-icon.ttf\sell-icon.woff)in its fonts folder into the common fonts folder, import the style.css file into common/stylus, and change it to stylus. Format (remove parentheses and semicolons) and rename it to icon.styl.
And icon.styl has:
#font-face {
font-family: 'sell-icon';
......
}
......
.icon-keyboard_arrow_right:before {
content: "\e900";
}
And I want to use it in head.vue
<template>
......
<i class="icon-keyboard_arrow_right"></i>
......
</template>
.......
<style lang="stylus" rel="stylesheet/stylus">
#import "../../common/stylus/mixin"
.....
.icon-keyboard_arrow_right
margin-left: 2px
line-height: 24px
font-size: 10px
</style>
But unlucky, icon-keyboard_arrow_right does not appear in my web page.It seems nothing wrong in my code.
Who can help me?
I'd like to make my styles dom-module, and because I like using the #apply css directive, I wish I could do something like :
<dom-module id="my-styles">
<template>
<style>
html {
--big-title: {
font-size: 1.3em;
text-transform: UPPERCASE;
}
}
</style>
</template>>
</dom-module>
But if I do that :
<dom-module id="my-element">
<template>
<style include="my-styles">
h1 {
#apply --big-title;
}
</style>
...
</template>
</dom-module>
Sadly this won't work. I am not sure why. My question is Can I use the #apply directive in conjunction with the styling dom-module solution ?
You should instead assign your properties to :host, I would say.
Check this example:
http://jsbin.com/dikacewulu/2/edit?html,output
Here, :host refers to the element including the style (so my-element). If you really wanted those rules to be available on html, you could use :root.