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.
Related
Getting api response like this
"sample_response":
{
"id": 1,
"icon": "fa-ambulance",
}
for static icon i used
icon: FaIcon(FontAwesomeIcons.gamepad),
How to load icon based on the json response
This is not supported by Font Awesome Flutter.
There is another package to help you with that: Icons Helper
However, if you try right now, you will see that Icons Helper refers to an adobe icon that does not exist anymore. It has been removed from the package in the master on Git but not yet on PubDev.
You could also just integrate icons_helper.dart in your project and maintain the map you need in your app.
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!
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 have two questions
Can this code be added to blogger?
Can this code embed unicode fonts? and if can, please tell me the link how to do it.
I can't see your code Kotaro ,
but any code can added to blogger and and by default embedding font in web is not available . but you can use CSS 3.0 to force user to use from the font you like, this css property is
font-url
and you can use it as any other css property like
<div style="direction:ltr;text-align:left;font-size:small;font-url:('../resources/fonts/YourFont.ttf');"> you code </div>
just note that this CSS property just available at css 3.0 and now just Firefox 3.5 supports it so I recommand you Ignore it for now,
if you want to show a speciall text just use from a font that you know your users have it, like (Arial , Tahoma , Verdana ) for windows usres
for code you can use these software
1- copysourceashtml
http://copysourceashtml.codeplex.com/
that is a opensource software
copysourceashtml http://i3.codeplex.com/Project/Download/FileDownload.aspx?ProjectName=copysourceashtml&DownloadId=78099
2- Postable
http://vahid.nasiri.googlepages.com/postable.rar
I am having the "Futura.ttf" font file.
I am displaying a HTML page in the UIWebView, but my requirement is that i want to use the custom font in my css file.
so is there any way that i can use the custom font in my css file ???
All suggestions are welcomed.
Thanks.
It is possible to load custom fonts into your UIWebView in iOS3.2 and above. Add the font to your bundle (see here) then just reference the font in your UIWebView's stylesheet like you would any other font:
<style type='text/css'>font { font-family: DroidSerif; } </style>
You have Cufon and sIFR as your options.
Typeface.js is a pure JavaScript Replacement
Cufon is a pure JavaScript Replacement
sIFR is Flash and Java font implementation,
FLIR JavaScript and PHP implementation
Some Comparisons
http://thatguynamedandy.com/blog/text-replacement-comparison
http://thinkclay.com/technology/cufon-sifr-flir
http://aaronwinborn.com/blogs/aaron/cufón-alternative-sifr-image-replacement
Below is taken from this question Worth reading the whole thread, has greatdetails.
Typeface.js
Advantages:
User doesn’t have to have Flash
plugin installed on their browser
Easier to create with just a few
lines of Javascript
For page loading it just needs to
load the Javascript
Disadvantages:
Text is not selectable because it
outputs it like an image. I looked at
some examples, right clicked on a
word and had to view as an image.
Every single word had this behaviour.
Big thumbs down.
Usage for body copy will slow down
loading time, so it is recommended to
use only for headlines.
Cannot be read by screen readers
Visual looks blurry
Not all browser compliant and still
has a lot of development left to be
done
sIFR
Advantages:
Can be read by screen readers as a
normal headline because it is a
behaviour layer on top of the markup
and styling.
Text is selectable
SEO friendly
Displays text as is like any other
web font. Crisp and not blurry!
Has addons like jQuery sIFR Plugin!
Disadvantages:
Requires Javascript to be enabled
Flash plugin must be installed in the
browser
Need Adobe Flash Studio to create it
BUT there is a pretty nifty sIFR
generator that creates the file for
you!
For page loading, it has to request
for Flash, Javascript and CSS files
attached to it, which can potentially
get bogged down if you are using sIFR
in too many places.
Cannot display on an iPhone. Yet…
Cufón (similar to Typeface.js)
Enter Cufón, the Javascript-based font replacement solution which makes heavy use of canvas and VML. This offers a great alternative to other solutions out there - no Flash or images required.
There are some issues with using Cufón on a live site, the most notable being the inability to highlight and copy/paste text, which is really the biggest issue for your site's users.
Combine that with the EULA issues, which prevent you from being able to legally embed fonts in Javascript files for most fonts on the market today.
The other issue is knowing what fonts can be used with Cufón. For sIFR, most fonts are fair game, since the font is embedded in a Flash movie, which is typically an approved usage by most font foundries for most fonts. With Cufón, the Javascript files used for the font can be easily "stolen" and either used on another website or reverse engineered.