How load IcoMoon webfont in React? - css

How load webfont in React?
added the 4 webfont to the public folder
created font-face
#font-face {
font-family: "IcoMoon";
src: url("/icons/line-icons-fonts/icomoon.eot");
src: url("/icons/line-icons-fonts/icomoon.svg") format("svg"),
url("/icons/line-icons-fonts/icomoon.ttf") format("truetype"),
url("/icons/line-icons-fonts/icomoon.woff") format("woff");
}
put a div in an a. Set fontFamily and className. But icon does not appear, strange. I would use one of these icons.
https://themekit.dev/docs/code/iconsmind/
<a
href={`https://www.facebook.com/dialog/share?app_id=2773133082797983&display=popup&href=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&redirect_uri=https://sendmade-portal-vercel.vercel.app/hu/product/${props.productId}&hashtag=#bestGift&quote=EgyMondat`}
>
<div
style={{ fontFamily: "IcoMoon" }}
className={"im-over-time2 text-lg"}
></div>
</a>

No need to add the #font-face {... manually, but you need to add the CSS file generated by IcoMoon to be able to use the font(s).
This is because the class names for the icons are defined in that .css file.
Currently in you case yes you added the fonts file, and declared a font-face but where is defined the CSS rules for you icon im-over-time2 ?
The style.css file created by IcoMoon declare all the classes for the icons you selected, something like :
.icon-blablabla:before {
content: "\e91c";
}
.icon-youhou:before {
content: "\e948";
}
.icon-foobar:before {
content: "\e98d";
}

Related

Flaticon, import icon with different content name

I it possible to use an flat icon with different content name ? I want to add new icon to existing project so I download flaticon as font icon. But its conflict previous icon set.
.flaticon-alert:before { content: "\f100"; }
Is there any way to fix it ?
The icon fonts are fonts, so for 2 icon sets that use the same character ("content") you just have to ensure that the class name also specifies the font-face:
styles.css
.flaticon-alert:before {
font-family: flaticon; // or name given in flaticon's #font-face css
}
flaticon.css example:
#font-face {
font-family: flaticon;
src: url(flaticon.woff);
}

materialize css btn class doesnt apply custom font

I'm working on an online store project and it needs a custom font. I'm using Materialize CSS framework in Angular 7, but btn class doesn't apply correctly custom font, anything else does. any help please friends!
I have tried custom btn class apply to style with !important, it does apply but damaged ways.
#font-face {
font-family: 'AcadNusx';
src: url('./assets/fonts/AcadNusx.woff') format('woff2'),
url('./assets/fonts/AcadNusx.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'AcadNusx' !important;
padding: 0;
margin: 0;
}
a {
font-family: 'AcadNusx' !important;
}
.btn {
font-family: 'AcadNusx' !important;
}
and the template code is:
registracia
when I delete btn class from the button font apply correctly but there is no styling
please help, I need just to apply this font but btn style is making me headache. thanks for your attention.
best regards
AcadNusx is an 'unusual' Georgian typeset _
To display it correctly needs more #font-face information than you currently have in your CSS code _
According to the Fonts2U resource_ you need to upload (or install via Angular cli?) all 4 versions of the font to your fonts folder_ including .ttf,.woff,.eot,.svg _ then copy / paste the accompanying CSS code into your main CSS file or import the code as separate CSS _
The 4 versions of the font_ the CSS code_ and all the instructions you need_ are all included in the downloadable resource from: https://fonts2u.com/acadnusx.font

How to use custom fonts in Laravel's blade?

Basically, I have imported various custom font templates into my public/fonts folder. Examples are Muli, Muli-Bold, Muli-ExtraBold. My question now is, how do I call and use these fonts in my blade files?
You can add custom fonts in laravel as like you add in an HTML template. You can add it in blade like
<style type="text/css">
#font-face {
font-family: Muli-Bold;
src: url('{{ public_path('fonts/Muli-Bold.tff') }}');
}
</style>
And you can add it in any css file as :
#font-face {
font-family: Muli-Bold;
src: url('/fonts/Muli-Bold.tff');
}
If you want to add custom font in lavarel you can add it just like you do in HTML file . You can add in css as:
#font-face {
font-family: Muli-Bold; src: url('/fonts/Muli-Bold.tff');
}
Or you can include the above code in blade using the style tag.

Not able to change SuperTabNavigator tab text's font

I'm struggling with SuperTabNavigator coz I'm not able to change the tab text's font.
My font is a OTF embedded in the application via #face-font syntax in my style sheet, and I have used this successfully in other places e.g. spark label.
Then I have defined a style for the SuperTabNavigator referencing the aformentioned font both in term of fontStyle and fontFamily.
No result achieved.
Could you please provide the correct way to change tab text's font in the SuperTabNavigator component?
Thanks in advance
Best Regards
Try to modify CSS the SuperTabNavigation
#font-face {
src:url("./fonts/YOURFONT.TTF");
fontFamily: myFont;
}
#font-face {
src:url("./fonts/YOURFONT.TTF");
fontWeight: bold;
fontFamily: myFont;
}
SuperTabNavigator {
popupButtonStyleName: "popupButton";
tabStyleName: "firefoxLikeTabs";
leftButtonStyleName: "leftButton";
rightButtonStyleName: "rightButton";
buttonWidth:20px;
font-family: "myFont";
font-size: 11;
}

Css Font won't import online

i have a imported css font with the following code:
#font-face
{
font-family: font;
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
The problem is that online doesn't work but locally works.What is causeing the problem
Try renaming the file path, for example ---> "myriad-pro/myriad-pro/MyriadWebPro.ttf". Is your css file in the folder with the font. Check if your path is right.
P.S: Remove the bottom url (that on the third line.). When I use font-face I use only two. Example: font-family: Consolas;
src: url('Consolas.ttf');
#font-face
{
font-family: MyriadPro; /* just declares a font in your stylesheet */
src: url('myriad pro/myriad pro/MyriadWebPro.ttf'),
url('myriad pro/myriad pro/MyriadWebPro.ttf');
}
body
{
/* now you need to use it */
font-family: MyriadPro, sans-serif;
/* so name it something useful, instead of just "font" */
}
answering old questions
for those who come looking after

Resources