For some reason, I am getting Chinese symbols instead of the right icon. I have the .ttf in app/fonts directory and .css under /app. Hope that you will find my mistake
app.css
.fa {
font-size: 60;
font-family: FontAwesome, fontawesome-webfont;
}
.ion {
font-family: Ionicons, ionicons;
font-size: 60;
}
main.ts
import { TNSFontIconService } from 'nativescript-ng2-fonticon';
nativeScriptBootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(TranslateLoader, {
useFactory: () => {
return new TNSTranslateLoader('assets/i18n');
}
}),
TranslateService,
provide(TNSFontIconService, {
useFactory: () => {
return new TNSFontIconService({
'fa': 'font-awesome.css',
'ion': 'ionicons.css'
});
}
})
])
page.html
<Button class="fa" [text]="'fa-bluetooth' | fonticon"></Button>
<Label class="ion" [text]="'ion-flag' | fonticon"></Label>
page.ts
import { TNSFontIconService, TNSFontIconPipe } from 'nativescript-ng2-fonticon';
#Component({
templateUrl: 'pages/pages/page.html',
pipes: [TranslatePipe, TNSFontIconPipe]
})
export class Pages {
constructor(private fonticon: TNSFontIconService,
private translate: TranslateService) {}
In my opinion there is a problem with the setting the font-family property in your app.css file. When you download the custom font, you should set the same font file name to font-family without changing it.
I tested ionicons in a sample project and you can review it here in my github repo.
In addition you could review this article: Icon Fonts
In app.css, if you are implementing on android, then the font-family must be the same name of the .ttf file's name. For example, you have the font file which is fontAwesome.ttf then the CSS should be:
.some-cssClass{
font-family: fontAwesome;
}
However if it's iOS, you have to make sure that font-family is using the name of the font. Double click to fontAwesome.tff, you will see the name of the font: "FontAwesome" (for example), then:
.some-cssClass {
font-family: "FontAwesome";
}
Hope this could help you.
I finally found the issue.
I had app.css and app.android.css. All my settings for fonticon was in app.css. Because of the app.android.css, the "compiler" took the info from app.android.css instead!
Related
We have a web application built using Angular 9. It has colors for headers, borders and some menu backgrounds stored in multiple places in css files.
The ask is to change those as per client branding. So if ClientA logs in, they should start seeing those colors as #FF0000 and if ClientB logs in, they need to see those colors as #00FF00.
Other than inline styling every html with style="color:{{clientColor}} can you help suggest the best way to do this?
Thank you!
You can try to use :root selector and variables in it, and for body tag just overwrite these root variables, working example here: stackblitz
styles.scss:
:root {
--fontColor: #000;
}
.theme-dark {
--fontColor: red;
}
app.component.ts
export class AppComponent {
theme = 'theme-dark';
toggle(): void {
const body = document.body;
if (body.classList.contains(this.theme)) {
body.classList.remove(this.theme);
} else {
body.classList.add(this.theme);
}
}
}
app.component.html
<p>
Start editing to see some magic happen :)
</p>
<button (click)="toggle()">Toggle color font</button>
app.component.scss
p {
font-family: Lato;
color: var(--fontColor);
}
You can use this:
[style.color]="clientColor"
I'm building a blog in NextJS. Apparently in Tailwind's list style type the default style is list-none. So every <ul> <li> elements in my app is not styled at all.
I use remark to process .md files and my function returns <ul> <li> without classes so in this case I can't specify the classes by manually writing them.
Is there any way to change this default styling so my <ul> <li> is not plain text?
or is there any way to give a list-disc class to all <ul> <li>?
or is there any way to exclude certain <div>s from being styled by Tailwind?
other approach?
I tried this
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
listStyleType: false,
}
}
but it doesn't solve the problem.
Any help would be appreciated.
Directives
You can use a preprocessor like PostCSS you can use the #apply or use the #layer directive.
ul {
#apply list-disc;
}
OR
#tailwind base;
#layer base{
ul {
#apply list-disc;
}
}
Base styles
You can also use base styles
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, theme }) {
addBase({
'ul': { listStyle: 'disc' },
})
})
]
}
You can disable the tailwind default nomalized stylings (preflight) from the tailwind.config.js like this:
module.exports = {
corePlugins: {
preflight: false,
}
};
Checkout the tailwind plugin #tailwindcss/typography: https://tailwindcss.com/docs/typography-plugin
Use prose class to wrap your markdown content, so that tailwind default style would be removed.
I'm working on an email client application for Gmail. When I load some of the emails, the styles from the email body are affecting the styles of our application as well. Few emails have the hardcoded styles for the paragraph and div tag directly. How to isolate the styles from the external sources and make them applicable only for a particular div and its child elements?
Sample style which is causing the issue:
p, ul, ol {
font-size: 17px;
line-height: 24px;
font-weight: normal;
margin: 0;
margin-bottom: 15px;
}
The above code paragraph tag has font size set to 17px. which is getting applied throughout the page wherever we use the paragraph tag.
Code to set the email body to the Div:
<div [innerHTML]="sanitizedemailBody" style="isolation: isolate;"></div>
I know that if we use the iframe we can fix this issue but it adds a lot of work as we need to handle the click for the anchor tags in the iframe and some other application-specific restrictions. Is there any better approach to handle this?
Solution from Adam Spence:
external-html.ts
import { Component, Input, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-external-html',
templateUrl: './external-html.component.html',
styleUrls: ['./external-html.component.scss'],
encapsulation: ViewEncapsulation.ShadowDom
})
export class ExternalHtmlComponent implements OnInit {
#Input('externalContent') externalContent: string;
constructor() { }
ngOnInit(): void {
}
}
external-html.html
<div id="externaHtmlHandler" [innerHTML]="externalContent"></div>
And in the parent component's HTML file added the below line:
<app-external-html [externalContent]="currentMessage"></app-external-html>
You could try using Shadow Dom view encapsulation: https://angular.io/guide/view-encapsulation on the component where you set the innerHtml. The downside is that you will have to redefine all the required styles in that components style file and it takes a bit of getting used to, also browser support could be an issue for you.
I use the Twemoji library to get emoji icons in my Next js App, they appear as <span><img></span> in the final HTML and I can override their default width and height using !important in my globals.scss file:
.customize { //Parent class containers 3 buttons, each one has an emoji element
top: 88%;
right: calc(50vw - (52.2px + 3rem));
button {
span img[style]{
width: 35px !important;
height: 35px !important;
}
}
}
Then I tried to extract it as a [].module.scss file, everything works but the images don't change size whatsoever. Why?
Edit
Here is the component I'm trying to style:
import ThemeButton from '../components/themeCustomizeButton' // a button that renders an emoji
import LanguageSwitcher from '../components/LanguageSwitch' // a button that renders an emoji
import Complex from '../components/ComplexitySwitch' // a button that renders an emoji
import styles from "../styles/local/components/customize.module.scss" // importing .module.scss
function Customizing() {
return(
<section className={styles.customize}>
<ThemeButton />
<LanguageSwitcher />
<Complex />
</section>
)
}
export default Customizing
Just use this code before wherever you are trying to extract
$(document).ready(function () {
// Set the size of the rendered Emojis
// This can be set to 16x16, 36x36, or 72x72
twemoji.size = '36x36';
});
trying to use Font Awesome 5 SVG es6 searchPseudoElements
import fontawesome from '#fortawesome/fontawesome';
import solid from '#fortawesome/fontawesome-free-solid';
fontawesome.library.add(solid.faTrashAlt);
works fine with <span class="fas fa-trash-alt"></span>
tried adding
fontawesome.config = {
searchPseudoElements: true,
};
:after {
font-family: 'Font Awesome 5 Free';
content:'\f2ed';
}
but not rendering, any tips?
You need to set the config before you load the main Font awesome package.
As per docs: 'Order matters' block
// Make sure we can use pseudo classes
fontawesome.config = { searchPseudoElements: true };
// Base package
import fontawesome from "#fortawesome/fontawesome";
And don't forget to hide your ::after