How to customize ion-tab tabtitle font ?
For example
<ion-tab [root]="tab1Root"tabTitle="Home" tabIcon="home"></ion-tab>
how to customize font of "Home" here ? i created scss file inside tabs folder but couldnt make it work.
thanks
You can add the following to your app.scss:
.tab-button-text {
font-family: fantasy;
}
You can always use chrome dev tools or safari dev tools to check which class you have to modifiy to change the style of a specific element.
Related
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 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
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.
I use Chrome development tools to inspect a header color I want to change:
I have located it, and I can change it in the inspector view, but I want to change it for real, so I need to know where the CSS is … but it says that it is a index file (index) 573.
What does this mean?
It is a wordpress theme and more specifically it is the woocommerce plugin
You can try overriding in style sheet using more descriptors in CSS.
Maybe something like:
html body .woocommerce-page form table.shop_table thead {
background-color: #333333 !important;
}
You could click where it's indexed in the Element inspector to bring up the CSS file. It's probably min'd so I'd recommend using PrettyPrint. That should show you, unless I misunderstood.
Here's a screen shot album I put together. I have Devtools Author so ignore the silly UI http://imgur.com/a/4JrKA
I'm having trouble changing the font on a website I built using the WordPress theme Zerif Lite.
The page itself is (REMOVED LINK) - I want to change the font in the "testimonial" section or as its displayed there: "Teenused".
That weird font in the bottom of every box (a.client-name)
I have tried so far:
Custom CSS plugin - it lets me only change the font size, when I set new font there, it won't change anything.
Changed the theme's CSS files, also no luck there.
Will appreciate any kind of help.
You can change the font by targeting the correct selector, which is: .feedback-box .client-info .client-name. The current font is called Homemade Apple and is declared in the main theme's CSS file (style.css) at line 2797:
.feedback-box .client-info .client-name {
font-family: 'Homemade Apple', serif;
color: #404040;
}
Simply change that to your desired font, for example:
.feedback-box .client-info .client-name {
font-family: 'Montserrat', sans-serif;
color: #404040;
}
Have you try to add an !important rule to your CSS. It's either that or verify the load order from your styles.
When it comes down to a CSS style, the reason it may not be aplying is because there is another more specific selector, try adding parent selector to your rules, or it could also be that the theme's rules are loading after your rules and replacing them.
One last thing to check, when dealing with fonts: make sure your browser have access to and knows the font. If it does not finds it, it will just replace it with another one, without any warning.