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?
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 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>
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 have a website where each section has its own primary color.
I'd like to put something in Bootstrap 4's Sass code, to override the primary color depending on a body class I set.
I have this, but it's not working so far:
$theme-colors: () !default;
$theme-colors: map-merge((
// primary: $blue,
// secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
), $theme-colors) !default;
// override according to portal
html {
&.portal-1 {
$theme-colors: map-merge((
primary: #f1b36d
), $theme-colors);
}
How can this be implemented in Bootstrap 4's Sass file?
You can't change the sass variables which are already converted to static CSS dynamically at the client side.
However, to build theme system you can apply one of the following options:
1. Generate independent theme
Put a theme argument in your build system which will generate different themes CSS Ex: grunt build-sass --theme=brown
var themes = {
"default": "https://bootswatch.com/flatly/bootstrap.min.css",
"cerulean" : "https://bootswatch.com/cerulean/bootstrap.min.css"
}
// Use something like this to add theme: (You can also append instead of overriding whole head html)
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '<link type="text/css" rel="stylesheet" href="' + themes.cerulean +'">';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
2. Change properties based upon the parent class
You can have a base CSS which defines general CSS. And then you can have separate CSS Properties based upon the parent
In the following example update green-theme class to blue-theme and vice versa
div[class^=component] {
display: inline-block;
width:150px;
height: 150px;
margin: 1em;
border: 1px solid black;
box-shadow: 1px 1px 5px gray;
border-radius:1em;
}
/* Colors*/
$blue1: #3066BE;
$blue2: #090C9B;
$green1: #5C946E;
$green2: #80C2AF;
/* Blue Theme */
.blue-theme {
.component1 {
background-color: $blue1;
}
.component2 {
background-color: $blue2;
}
}
/* Green Theme */
.green-theme {
.component1 {
background-color: $green1;
}
.component2 {
background-color: $green2;
}
}
<div class="green-theme" id="mainBody">
<div class="component1">
</div>
<div class="component2">
</div>
</div>
*Run Snippet won't work as we are using SCSS *
Make a scss file structure like this,
- vendors
- bootstrap
- stylesheets /*[Bootstrap 4 official sass files]*/
- _bootstrap.scss
- scss
- themes
- _theme-1.scss
- _theme-2.scss
- _variables.scss
- styles.scss
- portal-1.scss
- portal-2.scss
_variables.scss
#import "../vendors/bootstrap/stylesheets/bootstrap/variables";
#import "../vendors/bootstrap/stylesheets/bootstrap/mixins";
/* override bootstrap default variables ... */
/* custom variables with !default ... */
styles.scss
#import "variables";
#import "../vendors/bootstrap/stylesheets/bootstrap";
/* custom styles ... */
themes/_theme-1.scss
#import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #428bca
$brand-success: #5cb85c;
$brand-info: #5bc0de;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$body-bg: #eff;
themes/_theme-2.scss
#import "../variables";
/* change value bootstrap and custom default variables ... */
$brand-primary: #C04848;
portal-1.scss
#import "themes/_theme-1";
/* change style with new variable bootstrap default components ... */
.portal-1 {
#import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
#import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
/* custom style overrides ... */
}
portal-2.scss
#import "themes/_theme-2";
/* change style with new variable bootstrap default components ... */
.portal-2 {
#import "../vendors/bootstrap/stylesheets/bootstrap/buttons";
#import "../vendors/bootstrap/stylesheets/bootstrap/alerts";
/* custom styles from style.scss overrides ... */
}
After sass compilation we will get 3 files styles.css, portal-1.css and portal-2.css.
Use style.css by default and others include in head tag for theming.
<html>
<head>
<link href="styles.css" rel="stylesheet" />
<link href="portal-1.css" rel="stylesheet" />
</head>
<body>
<button class="btn btn-primary">BUTTON</button>
<div class="portal-1">
<button class="btn btn-primary">BUTTON</button>
</div>
</body>
</html>
NOTE: After searching a while for a simple solution, I though I could avoid the pain for anyone trying to achieve this:
You can use CSS variables to achieve this.
There is a thread on the main bootstrap github page Github Issue and user #johanlef has posted a gist showing his method and the relevant code gist.
Then you can just make sure the css variables is initialized in you page
.body.theme1{
--primary: #5d8be5;
}
I used for one of my multi tenanted website and it works great.
I am building a static website to use as a blog with the R blogdown package which acts as a wrapper for the Hugo static website generator.
I would like to have a line of social media icons immediately underneath the title which I have achieved somewhat using the FontAwesome toolkit which was already being used by the theme I chose.
However I would like to include some icons not present in the toolkit. Some I found in the Academions project and one I made myself as a single layer SVG in Inkscape. It is a square icon for Pocket.
I combined them all into a custom font (called customfonts) using the Icomoon app and placed the fonts in my Hugo static/fonts directory and the CSS file in my static/css directory. I also amended the file paths in the CSS file to point to the static/fonts directory and added in style classes which are like the ones in the FontAwesome CSS file.
I call the CSS files in my page footer and have tried to insert the icons.
When I use one of the icons originally from the Academicons font like so:
<i class="cf cf-GoogleScholar cf-3x"></i>
I get the icon but when I try to insert my custom icon like so:
<i class="cf-pocket-square cf-3x"></i>
I do not get the icon displayed.
When I inspect the HTML I can see it in the code.
There must therefore be something wrong with the SVG I made. However I do not know what that is or how to fix it.
I have placed the SVG I made, the CSS file and the font files in this directory.
How can I get my icon to display?
EDIT: I have added a MWE to the directory linked above.
Here is the HTML:
<html class="wf-opensans-i3-active wf-opensans-i7-active wf-opensans-n3-active wf-opensans-n7-active wf-breeserif-n4-active wf-active" lang="en-us">
<head>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<link rel="stylesheet" href="./customfonts.css">
</head>
<body>
This one works:
<div>
<i class="fa fa-twitter-square fa-3x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="cf cf-GoogleScholar cf-3x"></i>
</div>
This one with my custom icon does not:
<div>
<i class="fa fa-twitter-square fa-3x"></i>
<i class="fa fa-facebook-square fa-3x"></i>
<i class="cf cf-pocket-square cf-3x"></i>
</div>
</body>
</html>
This is what the output looks like:
This is what the top of the CSS file looks like:
#font-face {
font-family: 'customfonts';
src: url('./customfonts.eot?7cqlun');
src: url('./customfonts.eot?7cqlun#iefix') format('embedded-opentype'),
url('./customfonts.ttf?7cqlun') format('truetype'),
url('./customfonts.woff?7cqlun') format('woff'),
url('./customfonts.svg?7cqlun#customfonts') format('svg');
font-weight: normal;
font-style: normal;
}
.cf {
display:inline-block;
font:normal normal normal 14px/1 customfonts;
font-size:inherit;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.cf-pocket-square .path1:before {
content: "\e900";
color: rgb(0, 0, 0);
}
.cf-pocket-square .path2:before {
content: "\e901";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.cf-pocket-square .path3:before {
content: "\e902";
margin-left: -1em;
color: rgb(255, 255, 255);
}
.cf-GoogleScholar:before {
content: "\e903";
}
+ style classes ...
Edit #2: #grinmax correctly pointed out that the HTML structure was inconsistent. Following his suggestions gave the following results:
Change the HTML
Change the CSS
While the icon is being produced it is not correct as IcoMoon appears to have separated the layers I used to create the icon. However when I look at the SVG I used to make the font I can confirm that I condensed them all into one layer so I don't know hot this is occurring. What am I missing?
EDIT #3: Since it appears my SVG is the problem I have been trying to get it right. I have made some progress but also asked a question here.
#grinmax correctly pointed out that my HTML structure was inconsistent and following his suggestions I overcame the issue of the custom icon not displaying. However it was not displaying correctly.
I realised that the font the Icomoon app had created had split the shapes in the SVG into separate glyphs, despite it being a single layer on Inkscape. I therefore redrew the SVG to be contained within a single <path> tag (see here) and regenerated the font using Icomoon.
I have created an addition to the MWE which looks like this:
This is what I wanted. The HTML is the same as what I presented above and the CSS is that suggested by #grinmax.
This don't follow yor html structure
.cf-pocket-square .path1:before {
content: "\e900";
color: rgb(0, 0, 0);
}
.cf-pocket-square .path2:before {
content: "\e901";
margin-left: -1em;
color: rgb(0, 0, 0);
}
.cf-pocket-square .path3:before {
content: "\e902";
margin-left: -1em;
color: rgb(255, 255, 255);
}
Try use this html structure
<i class="cf cf-pocket-square cf-3x">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
or
.cf-pocket-square:before {
content: "\e900";
color: rgb(0, 0, 0);
}
and show me please result