I am using Nuxt.js (https://nuxtjs.org/), Vuetify.js (https://vuetifyjs.com/) and #mdi/font (https://materialdesignicons.com/) icon font.
I have a case where I want to use an icon, but not the normal way as I normally do in HTML, e.g.
<v-icon>
mdi-check
</v-icon>
but I want to use mdi-check in a SCSS rule (no icon-related html code), so I guess that what I need is dynamically resolving its content code, e.g.
&:before {
font-family: Material Design Icons;
content: 'here I need to dynamically access the code of the "mdi-check" icon, which is "\F012C"';
}
it is important to me not having to put the static code (\F012C), because it may change in the future, but I would like to find a way to dynamically resolve it.
Any idea?
Thanks
do like this.
<v-icon data-icon="\F012C">
mdi-check
</v-icon>
then in css
&:before {
font-family: Material Design Icons;
content: attr(data-icon);
}
Let me know if this does not work.
Thanks
Related
I want change text color etc of help_text in fields models.
I see in html that there is helptext class:
<span class="helptext">Sentenses</span>
so I try in my css file:
.helptext {
color: #bd512f;
}
and it dont do changes.
Is there collision with bootstrap?
In CSS, the style that is specified last is applied. Perhaps the styles of your frameworks are loaded later than the one you specified. Also, inline styles like your <span> have even more precedence.
I found the answer by code:
.helptext {
color: #bd512f !Important;
}
I'm using FontAwesome in the app and I've not installed PrimeIcons.
So now when I'm using the PrimeNg's tree, I don't have any "chevron" displayed to open/close each item.
I cannot find a way in a documentation to override it(like a lot of their other component.
How can I replace their pi pi-fw pi-chevron-down by something like fa-solid fa-chevron-down(same for the chevron-left)?
I'm not sure how to target a CSS element to then apply another css on it?
Or did I miss a way of customizing this element?
(it's ok if it's in a global style)
Your .scss file, maybe could be better to set only related to involved components:
:host ::ng-deep {
.pi {
font-family: 'FontAwesome';
}
.pi-chevron-down:before {
content:"\f107"
}
}
in order to override other icons, please refer to fontawesome related cheatsheet
I've got a stackblitz Angular 5 app for implementing table sorting here - https://stackblitz.com/edit/angular-rxdzom. It's based on the code from http://www.carbonatethis.com/sort-table-columns-with-angular-and-typescript/. It uses an ./app/sortable-table/sortable-column.component.css with the contents:
.caret-up:before {
content: "\f0d8";
}
.caret-down:before {
content: "\f0d7";
}
and an ./app/sortable-table/sortable-column.component.html that contains two i tags that reference these with the class attribute. Instead of showing the caret-up and caret-down, it substitutes a rectangular box. If I replace caret-up and caret-down with the Font Awesome library, "fa fa-caret-up" and "fa fa-caret-down", it works properly. My environment at work doesn't use Font Awesome and it's not an option to add it, so I need to create the css content manually as I'm attempting above. Any help is appreciated!
I've tried researching this on my own, and clearly have something that looks like it should work, it just doesn't. I've used references like http://webdesignerwall.com/tutorials/how-to-add-icon-fonts-to-any-element-with-css that seem to indicate the css is valid, and I've tried using ".caret-up i::before" which also does not work. I'm clearly missing something or doing something wrong. I even tried adding
padding-right: 10px;
font-family: "FontAwesome";
before the content property but that didn't help either.
I assume the css shown above is in your styles property of your component? If so, the issue is that the backspace needs to be escaped in your string. Update them to the following and you should be good!
.caret-up:before {
content: "\\f0d8";
}
.caret-down:before {
content: "\\f0d7";
}
An alternative for adding icons is through material icons
You can find the icons here : https://material.io/icons/
Include the following link in your index.html
And in the css add the class 'material-icons' to your property.
For example-
keyboard_arrow_up
You can refer to different symbols name on the above material icons link provided.
Okay, so a part of this was me being in the dark about our environment. We had updated font awesome to Semantic UI, which uses a port of the font awesome fonts so I just had to use those fonts. To do it manually, I could use:
.caret-up:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d8";
}
.caret-down:after {
padding-right: 10px;
font-family: Icons;
content: "\f0d7";
}
and to put the icons after the text, I just needed to move the "ng-content" tag above the "i" tags for asc/desc sort order. So, using the Semantic UI fonts, my sortable-column.component.html became:
<ng-content></ng-content>
<i class="caret up icon" *ngIf="sortDirection === 'asc'"></i>
<i class="caret down icon" *ngIf="sortDirection === 'desc'"></i>
And it worked great. I forked my Stackblitz app at https://stackblitz.com/edit/angular-nfwe6j to show how this was accomplished in my environment using the Semantic UI 2.3.1 of the font awesome fonts.
Recently I decided to switch to SVG icons from font icons. I used Illustrator to draw my SVGs and I exported the artboards (containing an individual icon) with the following settings:
Styling: Inline Style
Font: SVG
Images: Embed
Object IDs: Layer Names
Decimal: 2
I used the Icomoon app to generate the SVG icons. The problem though is, all the SVGs have a fill, stroke or style property inline everywhere. I can’t update the icon color with CSS while those styles are there in the SVG.
Am I missing something? Is there an option in Illustrator to save the SVG’s without the fill / stroke / styles properties? Or do I have to use something like Remove SVG Properties to remove the properties?
If Remove SVG Properties is the way to go, can someone tell me how to use it in my Angular CLI project? I’m very new to this.
Yes, you can.
Just select the svg in CSS then apply:
selector {
fill: red;
stroke: blue;
/* etc */
}
It seems to work fine for me.
Optionally, add !important if needed.
Another thing you can do to update inline CSS is by jQuery, using .css() method.
One way to use free icons from that place is (link):
.lnr-home {
color: red;
font-size: 40px;
/* To get crisp results, use sizes that are
a multiple of 20; because Linearicons was
designed on a 20 by 20 grid. */
}
body {
font-size: 40px;
font-family: sans-serif;
color: #red;
}
<!-- Add the following <link> to the <head> of your HTML. -->
<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-- To insert the icon: -->
<span class="lnr lnr-home"></span> lnr-home
<!--
Cheat Sheet:
https://linearicons.com/free#cheatsheet
-->
You can use online tool
this is automatically convert inline style.
use this android developer
http://inloop.github.io/svg2android/
Ill start with what I've done thus far:
Re-downloaded fonts
switched to CDN for bootstrap css
declared font in custom css file that i use for all my styling
If i use the traditional span that works e.g
<span class="glyphicon glyphicon-ok"></span>
I can also see the like default icon the browser puts there
Code:
.box-cont li:before {
content:"\e013";
}
my website is ukhotspot.co.uk it is obvious what's going on hopefully
Your have to add the font-family to the selector:
.box-cont li::before {
content: "\e013";
font-family: "Glyphicons Halflings";
}
If you don't do this, the browser try to use a fallback font and there is no custom icon.
You can also add the class .glyphicon to every element but the first one should be the simpelst solution.