I am trying to use FontAwsome in my nativescript app, I have tried several procedures but none works, I don't know where am going wrong. I am using "nativescript-fonticon": "^2.0.2" plugin and fontawsome 5
This is my Code
App.js file
import { TNSFontIcon, fonticon } from 'nativescript-fonticon'
// Load TNSFonticon
TNSFontIcon.debug = true
TNSFontIcon.paths = {
fa: './assets/css/fontawesome.min.css',
far: './assets/css/regular.min.css',
fas: './assets/css/solid.min.css',
fab: './assets/css/brand.min.css'
}
TNSFontIcon.loadCss()
Vue.filter('fonticon', fonticon)
scss file.
// Font icon class
.far {
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
font-weight: 900;
}
.fab {
font-family: 'Font Awesome 5 Free', 'fa-brands-400';
font-weight: 400;
}
Home.Vue
<Label text.decode="" class="fab"></Label>
I have also added fonts file
fa-brands-400.ttf
fa-regular-400.ttf
fa-solid-900.ttf
css
assets/css/all.min.css
assets/css/brands.min.css
assets/css/fontawesome.min.css
assets/css/regular.min.css
assets/css/solid.min.css
the code does not show any error but icons do not appear instead i get a crossed box instead of icons.
Related
I am using Laravel mix and webpack.mix.js to compile css in wordpress. I've set up the source files and am able to compile without errors using npx mix watch etc in visual studios, creating the app.css and app.js files in the dist folder.
let mix = require('laravel-mix');
mix
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist');
However, when I tried to add an image in one of the pages via the respective scss file,
#hero {
height: 550px;
width: 100%;
background: url(/images/water.jpg) #f0f0f0;
}
the files compile and the css is the same in the compiled app.css file, but the image is not visible on the page or in the inspection bar.
I've tried every variation for the image path, including adding ../ or ./ in front, but most just give an error.
I've tried to override with option processCssUrls to the webpack.mix.js
let mix = require('laravel-mix');
mix.options({
processCssUrls: false
})
.js('src/app.js', 'dist')
.sass('src/app.scss', 'dist');
but this doesn't seem to do anything, although it's possible I added it wrong.
Strangely, the file also doesn't properly compile any of the custom colours that I make. I made a _colour.scss file in the source file with
$light: rgba(13, 59, 21, 0.6);
$dark: rgb(131, 56, 56);
and imported in the main scss file, but sometimes when I use it for links or backgrounds, it defaults to a different colour, even the !important tag doesn't help. The compiled css file also just shows different colours,
in the _header.scss file:
a {
display: block;
padding: .25rem 1rem;
color: $dark!important;
font-size: 1.1rem;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: $light!important;
}
and in the compiled app.css file:
header .top-menu li a {
display: block;
padding: 0.25rem 1rem;
color: #212529 !important;
font-size: 1.1rem;
text-decoration: none;
}
header .top-menu li a:hover {
text-decoration: underline;
color: #f8f9fa !important;
}
so perhaps something is going wrong in the compiling
I am trying to generate a PDF that will contain Chinese characters using dompdf and hence I downloaded the font package and added the following code in my blade.php.
#font-face {
font-family: 'simhei';
font-style: normal;
font-weight: normal;
src: url('{{base_path().'/public/fonts/'}}'simhei.ttf) format('truetype');
}
body {
font-family: 'simhei', 'DejaVu Sans', sans-serif;
}
Next, I tried the API again with Postman. The response body shows square boxes as shown below.
But if I highlighted the text, it shows the Chinese characters.
If I save the response as a file in Postman, it also shows square boxes instead of Chinese characters when I opened it in WPS Office.
I have also tried with other font packages including Firefly Sung and msyh. All give the same result.
Try this:
#font-face {
font-family: 'Firefly Sung';
font-style: normal;
font-weight: 400;
src: url(http://eclecticgeek.com/dompdf/fonts/cjk/fireflysung.ttf) format('truetype');
}
* {
font-family: Firefly Sung, DejaVu Sans, sans-serif;
}
I have a .scss page that includes the following:
.actiontitle{
font-size: 1.5em;
color: lighten($primary,20);
&.saving::before {
content: "\f110"; //spinner
font-family: "Font Awesome\ 5 Free";
font-weight: 900;
}
}
I want to be able to make the spinner pulse. Font Awesome has another class (fa-pulse) that does this, but I'm not finding any kind of unicode value for fa-pulse like I can for fa-spin.
Does fa-pulse have a unicode character that can be used in CSS?
This doesn't answer the question of if there is a unicode character for fa-spin, but I was able to somewhat accomplish what I want with the following:
&.saving::before {
content: "\f110";
font-family: "Font Awesome\ 5 Free";
font-weight: 900;
animation: fa-spin 1s steps(8) infinite;
}
I'm using CKEditor 5 in Angular 7, Classic build.
All working fine except that the p tags in the content edit area have this css applied:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Which results in a big vertical margin between paragraphs in the content edit area.
I've been going through the documentation but haven't found a clear answer as to how I can remove or override this css. In previous versions of CKEditor the css file was easily accessible and overridden, but in version 5 not so - it seems I may have to do a custom build, which I'm hoping to avoid.
Before I go down that route - has anyone else come across this? Any other solutions or recommendations?
Thanks in advance :)
You should use :host ::ng-deep to override it with css.
Example:
:host ::ng-deep .text {
p {
margin-bottom: 20px;
}
h2 {
margin-top: 40px;
margin-bottom: 10px;
}
h3 {
margin-top: 25px;
margin-bottom: 5px;
}
h4 {
margin-top: 20px;
margin-bottom: 5px;
}
}
<ckeditor class="text" [editor]="textEditor" [config]="config"></ckeditor>
I'm using CKEditor 4 and I don't know if the source tab is still available in that version. If so, you have to edit ypur ck.config file and add CKEDITOR.config.allowedContent = true. After that, you can now paste a style in the source tab
The Icons I included in Nativescript dont work.
I followed every Step in this tutorial but the Icons look like in the picture.
I tried using different versions of Font-Awesome.
The Desktop and the web-version. I know that the Web-Version is the right one but you never know.
I Included Font-Awesome like this.
.far {
font-family: 'Font Awesome 5 Free', fa-regular-400;
font-weight: 400;
}
.fab {
font-family: 'Font Awesome 5 Brands', fa-brands-400;
font-weight: 400;
}
.fas {
font-family: 'Font Awesome 5 Free', fa-solid-900;
font-weight: 900;
}
And i used it like so:
<Label class="far" style="font-size: 50em; color: blue" text=""></Label>
For custom fonts, you need to add the font file in a folder src/fonts.
Based on your picture, it's Android you are using, and on that platform, your CSS font-family must match the font file name, ie. FontAwesome if your font file is named FontAwesome.ttf.
On iOS the font family must match the name in the font file - check out https://www.nativescript.org/blog/using-custom-fonts-in-a-nativescript-app
for more details.
Edit: Maybe you are just missing quotes around the font (file) names,
ie.
.far {
font-family: 'Font Awesome 5 Free', 'fa-regular-400';
}
.fab {
font-family: 'Font Awesome 5 Brands', 'fa-brands-400';
}
.fas {
font-family: 'Font Awesome 5 Free', 'fa-solid-900';
}
I've created a Playground:
https://play.nativescript.org/?template=play-ng&id=yUV2G5
and the three icons are displayed correctly on iOS.