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
Related
I am working on project where user wants to selects a font from a list and the page font changes.
Now I have the name of the font, but CSS doesn't have access to all the fonts. Is there a way where I can have access to a lot of fonts i.e. Google Fonts, without importing or downloading it?
You could also use typekit's webfontloader: webfont.js to load fonts after each select change event:
const fontSelector = document.getElementById('fontSelector');
let loadedFonts = [];
//add font weights:
let fontWeights = ":400,400italic,700,700italic";
//load default font
loadFont('Arimo', fontWeights);
fontSelector.addEventListener("change", (e) => {
let fontFamily = e.currentTarget.value;
loadFont(fontFamily, fontWeights);
});
function loadFont(fontFamily, fontWeights){
if(loadedFonts.indexOf(fontFamily)=='-1'){
loadedFonts.push(fontFamily);
WebFont.load({
google: {
families: [fontFamily+fontWeights]
},
fontloading: function () {
document.body.style.fontFamily = fontFamily;
}
});
}else{
console.log(fontFamily + 'already loaded')
document.body.style.fontFamily = fontFamily;
}
}
<select id="fontSelector">
<option>Arimo</option>
<option>Barlow</option>
<option>Bitter</option>
<option>Source Sans Pro</option>
<option>Merriweather</option>
</select>
<h1>Hamburgefons</h1>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
The API is pretty straight forward:
WebFont.load({
google: {
families: ['Arimo']
},
fontloading: function () {
document.body.style.fontFamily = fontFamily;
}
});
In the above example we're loading the "Arimo" font-family.
We can run a callback function after the font has been loaded: Apply it via inline style to the document body.
This way you don't have to load lots of fonts on initial page load.
Even though a browser won't load the actual font files (only the ones that are currently applied to DOM elements) – the css will be quite big due to a lot of #font-face rules.
Here is an example using just jquery/css...I am only linking to a stylesheet.You can request multiple families by just adding a pipe character in between. I also added the first few fonts, Arimo, Barlow, and Bitter without having to download the whole google font library. It grabs only what you ask it to grab in the stylesheet url.
http://fonts.googleapis.com/css?family=Arimo|Barlow|Bitter"
/*Simple Font Selector Control Demo using Google Fonts */
$("#fontSelector").on("change", function() {
$("#dFontSample").html($(this).val() + ": Your Sample Text");
$("body").css("font-family", $(this).val());
})
body {
font-family: 'Tangerine';
font-size: 32px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arimo|Barlow|Bitter|Open+Sans|Josefin+Slab|Arvo|Lato|Vollkorn|Abril+Fatface|Ubuntu|Old+Standard+TT|Lobster|Bevan|Berkshire+Swash">
<select id="fontSelector">
<option>Arimo</option>
<option>Barlow</option>
<option>Bitter</option>
<option>Inconsolata</option>
<option>Droid Sans</option>
<option>Open Sans</option>
<option>Josefin Slab</option>
<option>Arvo</option>
<option>Lato</option>
<option>Vollkorn</option>
<option>Abril Fatface</option>
<option>Ubuntu</option>
<option>Old Standard TT</option>
<option>Georgia</option>
<option>Arial Black</option>
<option>Times New Roman</option>
<option>Lobster</option>
<option>Bevan</option>
<option>Berkshire Swash</option>
</select>
<div id="dFontSample">Your sample text</div>
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';
});
How do I use Font Awesome Pro with NativeBase?
I can use a non-pro icon by following the documentation with, for example:
import { Icon } from 'native-base'
<Icon type="FontAwesome5" name="comment" />
but it’s unclear what else I need to do to ensure I can use a pro icon, for example:
<Icon type="FontAwesome5" name="user-md-chat" />
What do I need to do to get access to pro icons through native-base’s Icon component?
You can use FontAwesome icon in native-base style by passing the icon property.
In your case, this should work:
import { Icon } from 'native-base';
import { faUserMd } from "#fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "#fortawesome/react-native-fontawesome";
<Icon as={FontAwesomeIcon} icon={faUserMd} />
I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands.
I have defined Grid Custom Commands for Edit, Delete, and Detail.
columns.Command(command =>
{
command.Custom("Edit").Action("Edit", "User");
command.Custom("Details").Action("Details", "User");
command.Custom("Delete").Action("Delete", "User");
}
Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.
It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:
.k-grid-content .k-button.k-grid-edit::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
content: "\f1f8" !important;
}
And when grid transitions (after placed into edit mode):
.k-grid-content .k-button.k-grid-update::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
content: "\f1f8" !important;
}
Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.
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!