I’m new with Ionic React and I’m looking for the correct way to integrate custom fonts and a custom icon set into my project, so that it’s working on all platforms as intended.
Custom Icon set
My goal is to make my custom icons work with IonIcon so that I can use the default styling options like “size” and the CSS variables (e…g --ioinc-stroke-weight).
What I did so far:
I added the icon set (all icons are svgs) into “public/assets/customicons/”
I imported IonIcon into my components where needed
Integrated the (e.g. )
So far the icons are displayed as intended and custom attributes “size” is working.
But, I’m not able to set the icon color or stroke-width programmatically. All the icons have set a default attributes (e.g. < g fill=“none” fill-rule=“evenodd” stroke="#092A5E" stroke-linecap=“round” stroke-linejoin=“round” stroke-width=“8” >). Even if I remove those default attributes, I’m not able to set them via CSS variables
Question 1: Is “public/assets/customicons/” the correct folder to store the icons?
Question 2: How can I make it work that I can change the color of the icon via CSS?
Custom Font
Goal: I want that the custom font is shown on all platforms
What I did so far:
Added the custom fonts in “src/assets/fonts/”
Created a “fonts.css” in “src/theme/” where I integrated the font via “#font-face”
#font-face {
font-family: ‘FONTNAME’;
src: url(’…/assets/fonts/FONTNAME.ttf’);
font-style: normal;
font-weight: 400;
font-display: swap;
}
assigned the font to differnet elements
Question 1: Is this the correct folder to store the custom fonts? (I wasn’t able to do the same when the custom font was saved under “public/assets/fonts/” like the icon set)
Unfortunately, I wasn’t able to find any docs, tutorials or posts on any of these topics.
Thanks for your help!
Related
I created a Github.io blog using JekyllNow. JekyllNow allows you to create it fully on the web itself without having git or Ruby installed locally. i.e. everything was done without any local operation.
I am using the minimal theme. My page is created but the font seems very big. How do I change the font sizes on the page?
If there is a way to make it proportional, that would be even better - i.e. i.e. not just the default font size but also, H1, H2 etc sizes also are proportionally smaller.
Normally we edit the file style.scss located at the root of the jekyll instance.
body {
font-family: "Times New Roman", Times, serif;
}
But, if you are using the default Jekyll theme "Minima", you will have to edit the file minima.scss instead of the style.scss.
So, To change the default font size definition you need to reset the value of `$base-font-size'
$base-font-size: 16px !default;
Also you can change the default font definition itself by resetting the value of $base-font-family variable,
$base-font-family: "PT Serif", serif;
You will also need to remove the !default; suffix at the end of this setting for the new font to be applicable.
I'm looking for a way to remove margin around an ion-card. It seems like the ionic framework suggested way to do this is by using global variables in a theme file, such as the default theme > variagles.scss
Using the suggested variables yields no change in margin:
$card-md-margin-left: 0;
$card-ios-margin-left: 0;
However, using the ion-card tag instead works:
ion-card {
margin-left: 0;
}
I'm not sure if this is a change in ionic3 vs ionic4, but I'm having a hard time finding any ionic4 related documentation about theme variables.
Are you viewing the changes VIA the ionic serve command in your web browser?
the MD and IOS style tags you reference, are specific to the ANDROID/IOS platforms, so you are not likely seeing these in the web browser for that very reason.
I am searching for a way to use custom icon fonts already in the Fiori Launchpad.
I found one way using the UI theme designer: https://blogs.sap.com/2015/12/19/custom-icons-in-fiori-launchpad/. But as I understand these icons are only available with a custom theme.
I am searching a way to register my own font so that the icons are available similar as the Fiori launch icons.
Looks like they are stored here: /UI5/sap/ushell/themes/base/fonts/ and referenced by the default themes, like here: /UI5/sap/fiori/themes/sap_bluecrystal/library.css
#font-face {
font-family: 'Fiori2';
src: url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.eot");
src: url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.eot?#iefix") format('embedded-opentype'), url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
The icons are also available in the "Icon" selector of Fiori Launchpad Designer (FLPD) by name. So the questions are:
Is it possible to use own fonts similar to existing fonts?
If so, where and how should the font be placed?
If so, where and how should the icon names be defined, so that they can be used like this: "sap-icon://myNameSpace/iconname"?
I know already how to do it inside my own apps using sap/ui/core/IconPool (For reference: https://ui5.sap.com/#/topic/21ea0ea94614480d9a910b2e93431291). But how to do it in a standard theme inside the Fiori Launchpad / Fiori launchpad Designer?
Fiori design guidelines explicitly warn not to use custom icons inside Fiori launchpad e.g. Tiles:
We have decided to stop unique launch icons being created for individual apps. Creating a unique icon for every app was and is not scalable in terms of iconography and production [...].
Projects without a SAP Fiori ID do not get an individual icon.
Do not develop your own icons or use custom icons.
As such, there is currently no public APIs or documented solutions to provide custom icons for FLP.
Update: found the Note 2411631 which says pretty much the same thing:
There is currently no officially supported method for adding custom icons to the Launchpad for use with tile creation.
As well as the statement by Thorsten Dencker:
Changing the Icon Font is officially not supported by the SAP Theme Designer.
[...] Issue coming up with custom CSS cannot be handled by the normal support process.
I'm trying to create icon buttons. I've downloaded them from flaticon.com and had them exported as icon font files, which includes a TTF file.
In my css file I specify the external font as:
#font-face {
font-family: flaticon;
src: url('/flaticon/flaticon.ttf');
}
I've defined a button class that should use this font as follows:
.flaticon-button {
-fx-font-size: 90px;
-fx-font-family: flaticon;
-fx-padding: 10px;
}
My code applies the styleclass as follows:
Button button = new Button("\ue000");
button.getStyleClass().add("flaticon-button");
But unfortunately it doesn't show the expected icon.
When I load the font in my code and set it explicitly the correct icon is shown:
Font font = Font.loadFont(this.getClass().getResource("/flaticon/flaticon.ttf").toExternalForm() , 90d);
Button button = new Button("\ue000");
button.setFont(font);
I'm obviously overlooking something small, but despite how many examples I browse on the internet, or how long I stare at Oracle's CSS documentation I can't see what.
So, what is wrong with my CSS declaration and usage?
Thanks to the comment of rossum, I realized it it might have something to do with the URL not resolving to the class, as Class.getResource() does.
By loading the font in the main, before it is references by the code, it seems to be resolved. I guess there is no other way, but it seems to be a bit of a hack to me.
This one is quite specify: specify ttf font rendering font-weight:bold incorrectly on iOS mobile safari, open demo site with iphone/ipad with iOS 4.2/4.3 Beta 3 or above:
(this is Reenie+Beanie from google fonts)
http://jsbin.com/ojeqe3/16/
Screen capture
You see the bold font look double rendered. This is not significant for small and medium font size, but quite significant for large font-size / zoom in
My friend will report this bug to apple. However, anything he can do to solve the bug? (kill the text-adjust is not OK)
Update:
This one is not fixed in iOS5.
The best solution I know for the problem will be
Use font-weight:normal (as shown in demo)
Use either -webkit-text-stroke or text-shadow to make it look "bold" (plus iPad only css - body prefix added by js, not only media query)
Had the same issue with an h1 inheriting the font-weight: bold; from a parent class. Just overwrite the inherited style with a font-weight: normal;
It seems that Mobile Safari has a buggy way of rendering faux styles with font-faces. For bold it will double the text and offset, and with most fonts it would go unnoticed, but with thin font faces it will look like double vision.
In your case the Reenie Beanie does not include a bold style, and if you're using them as heading without changing the font-weight to normal or 400 it will render the bold weight "faux styled".
Please do note that using faux styles is generally buggy in some browsers and not only in Mobile Safari.
Solution 1. Use the appropriate font-weight
So the best solution is to change the font-weight to the one that Google Fonts provide, quick fix below:
h1, h2, h3, h4, h5, strong, b {
font-weight: 400;
}
/* or font-weight: normal */
Solution 2. Use a font that does provide the bold/italic style that you want
The other solution is to pick a font from a web font archive that does include a bold style. Alternatives in Google Fonts that look a lot like Reenie Beanie and are "bolder" would be e.g. Gochi Hand, Sunshiney, or Permanent Marker.
Solution 3. Fake the faux using other means
If you really insist on wanting a faux bold style you can try using a thin text-shadow or text stroke.
don't use the 'bolder' or 'bold' tag. they aren't necessary if you are using a specific weighted webfont.
I had the same problem. It went away when I removed any mention of font-weight.
Try applying this css rule:
-webkit-font-smoothing: antialiased;