Font awesome unicode some icons not displaying - unicode

I am using unicode as per cheetsheet: https://fontawesome.com/v5/cheatsheet/free/solid
I tried changing font-weight as per answer here but it hasnt helped: Font awesome 5 on pseudo elements
Maybe the issue is in css I linked? I dont know where to get other css version if there is newer.
.icon {
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Regular', 'Font Awesome 5 Brands', 'Arial';
font-size: 18px;
font-weight: 900;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<div><span class="icon brand"></span>airbnb</div>
<div><span class="icon"></span>amazon-pay</div>
<div><span class="icon"></span>bacteria</div>

The Unicode for the first and last icons are incorrect if you are using just Font Awesome 5.
 doesn't exist in any icon library or in Unicode at all.
 matches with glyphicon-facetime-video from Bootstrap Icons and replay_10 from Google Material Icons. The reason why it didn't show up as either is because Bootstrap Icons needs the class glyphicon and Google Material needs the class material-icons.
Moreover Font Awesome also needs a class assigned to it's element. The CSS class in OP code, .icon is sufficient (it has the FA font-family property), but if you don't have that, the built-in classes are adequate as well (free versions are: fa, fas, and fab).
HTML
With Unicode
<i class="fas"></i>
Without Unicode
<i class="fas fa-biohazard"></i>
:root,
body {
font: 2ch/1 'Segoe UI'
}
.fab,
.fas {
margin: 2px 3px;
font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Regular', 'Font Awesome 5 Brands', 'Arial';
font-size: 1.5rem;
font-weight: 900;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
<div><i class="fas fa-bed"></i> Airbnb Locator</div>
<div><i class="fab"></i> Amazon Pay</div>
<div><i class="fas fa-biohazard"></i> COV-ID Status</div>

Firstly, you need to use the link of FontAwesome either CDN in index.html(main file) or import css in style.css
cdn: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
import in css file: #import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");
eg li::before
selector::before{
content: "\f007";
font-family: "Font Awesome 5 Free";
}

Related

How do I install new fonts in Ionic 4?

Does anyone know how to update the font for Ionic 4?
I tried adding the aileron.woff to assets/fonts and putting this in the variables.scss to no avail.
src: url('../assets/fonts/aileron.woff') format('woff');
This is how I managed to add a custom font to my Ionic application
Add a directory that contains the font files to the project under the folder src\assets\fonts
src\assets\fonts\myCustomFont
|
+-- MyCustomFontBold.ttf
+-- MyCustomFontBoldItalic.ttf
+-- MyCustomFontItalic.ttf
+-- MyCustomFontRegular.ttf
Define the fonts in the file src\theme\variables.scss:
#font-face {
font-family: 'My Custom Font';
font-style: normal;
font-weight: normal;
src: url('../assets/fonts/myCustomFont/MyCustomFontRegular.ttf');
}
#font-face {
font-family: 'My Custom Font';
font-style: normal;
font-weight: bold;
src: url('../assets/fonts/myCustomFont/MyCustomFontBold.ttf');
}
#font-face {
font-family: 'My Custom Font';
font-style: italic;
font-weight: normal;
src: url('../assets/fonts/myCustomFont/MyCustomFontItalic.ttf');
}
#font-face {
font-family: 'My Custom Font';
font-style: italic;
font-weight: bold;
src: url('../assets/fonts/myCustomFont/MyCustomFontBoldItalic.ttf');
}
In the same file src\theme\variables.scss, edit the :root element to define your custom font as the font of the Ionic application:
--ion-font-family: 'My Custom Font';
Add a Custom Font in directory folder src\assets\fonts
Define the fonts in the file src\theme\variables.scss before :root
#font-face { font-family: "Custom Font"; src:
url("../assets/fonts/Custom Font.xxx"); }
define your custom font in :root
--ion-font-family: "Custom Font";
You seem to be interested in Ionic 4 / Angular.
I just created a test app with template "blank" in Ionic 4.0.0 beta. Here's what I put into variable.sccs to change all fonts across platforms:
:root,
:root[mode=ios],
:root[mode=md] {
--ion-font-family: "Palatino", "Times New Roman", serif !important;
font-family: "Palatino", "Times New Roman", serif !important;
}
On my Mac I see "Palatino".
The key is, to use "!important". As far as the Beta goes, theming of fonts is not yet documented. It may be clarified later or the behavior may change in final. Keep this in mind.
Add your font in the directory assets, and add this to your variables.scss file to declare the font family and set a class that uses it:
#font-face {
font-family: 'custom';
src: url('../assets/fonts/custom.ttf');
}
.text-custom {
font-family: "custom";
}
Then in any xx.page.html you can use the class like this:
<span class="text-custom">your text</span>
It's work for me
Make sure you give the current font folder path and file name
You'll want to use the CSS4 variable --ion-font-family
Here is an example:
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Test Font Family</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://unpkg.com/#ionic/core#4.0.0-beta.2/dist/ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#ionic/core#4.0.0-beta.2/css/ionic.min.css">
<style>
#font-face {
font-family: 'Hanalei Fill';
font-style: normal;
font-weight: 400;
src: local('Hanalei Fill'), local('HanaleiFill-Regular'), url(https://fonts.gstatic.com/s/hanaleifill/v6/fC1mPYtObGbfyQznIaQzPQi8UAjA.woff2) format('woff2');
}
:root {
--ion-font-family: 'Hanalei Fill';
}
:root[mode=md] {
--ion-font-family: 'Hanalei Fill';
}
:root[mode=ios] {
--ion-font-family: 'Hanalei Fill';
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Test</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" fullscreen>
<ion-card>
<ion-card-header>
<ion-card-title>Font Family</ion-card-title>
</ion-card-header>
<ion-card-content>
Testing
</ion-card-content>
</ion-card>
</ion-content>
</ion-app>
</body>
</html>
1.Include the font ttf file inside the src/assets/fonts/ folder.
2.Now create the font family by including it in the global.scss(src/global.scss)
EX:#font-face {
font-family: 'CustomfontName';
src: url('./assets/fonts/CustomFont.ttf');
}
3.Apply the style
<ion-content>
<div style='font-family:CustomfontName'>
Sample text for custom font
</div>
</ion-content>
For better understanding click the below link,
https://www.youtube.com/watch?v=Hz7SLdGG8HA
in global.scss file
#font-face {
font-family: 'quicksand'; //This is what we are going to call
src: url('./assets/font/Quicksand-Bold_df5ccd3628ec30ca750b7a6c1f1d6dac.ttf');
}
.mobile-heading {
font-family: "quicksand";
}
and in HTML file mobile-heading class
<h1 class="mobile-heading">quicksand Font apply</h1>

Add material icons to an Ionic 3 project

Our web app has these material icons: https://fonts.googleapis.com/icon?family=Material+Icons
And we're currently developing the mobile version in Ionic Framework 3, and we want to use the same icons, but some of them aren't included in the framework.
How can I add them? Ideally, I would want to use them like the other Ionic icons:
<ion-tab [root]="tab1Root" tabTitle="Something" tabIcon="some-material-icon"></ion-tab>
Thanks.
Maybe it's a late answer but I want to share what I know.
Firstly, you can import easily by using Google's font url, but this will not work if user's device doesn't have internet connection:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
INSTEAD, I recommend importing the whole font into the project. To do this, you can download all MaterialIcons font types of different platforms(eot, ttf, woff, woff2, ijmap, svg):
https://drive.google.com/file/d/1pq9dHrfWBsd5NFoaaB76tZ8nEzBbGrbN/view?usp=sharing
Then, extract files and move them under assets/fonts/ folder of your Ionic project. In the variables.scss you can find this line of code:
$font-path: "../assets/fonts";
If you don't have just add that line. And also, introduce your project with new font by adding these code blocks into the variables.scss:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url($font-path + '/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url($font-path + '/MaterialIcons-Regular.woff2') format('woff2'),
url($font-path + '/MaterialIcons-Regular.woff') format('woff'),
url($font-path + '/MaterialIcons-Regular.ttf') format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
That's it! Use the icons where you need them:
<i class="material-icons">icon_name_here</i>
Follow this doc: http://google.github.io/material-design-icons/
the easy way:
1.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<i class="material-icons">face</i>
Well, I hope this might be helpful for someone using ionic 4.
To add the material icons in your ionic 4 app the following steps worked for me.
ng add #angular/material
follow the instructions on the CLI based on your preference.
for usage in your html
<span class="mi mi-face"></span>

Can I suppress the styling the Intel XDK provides for af.ui.css?

Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}

google web fonts only letters are working

I'm trying to use the font 'Cabin Sketch'
I incluced the font like it says on the google web font page:
html:
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css' >
css:
body {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #dbdbdb;
font-size: 14px;
}
Letters from a-z are working but any other charakters like .!# are not working.
In the google web font preview all characters are working.
Other fonts are working perfectly.
I'm using firefox 11.0 and Ubuntu 11.04.
I also created a issue on google font directory:
http://code.google.com/p/googlefontdirectory/issues/detail?id=124
Thank you in advance.
That seems right, Which browser are you using it with? It should work for all alphabets that it uses. I tested it and it works just fine. Make sure your browser supports #font-face
jsfiddle
http://jsfiddle.net/
html page
<head>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'/>
</head>
<body>
<div id="font">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
<div id="normal">
<p>Hey yo</p>
<p>1234</p>
<p>! # .</p>
</div>
​</body>​​​​​​​​​​​​​
css
body {
padding: 100px;
}
div {
margin: 10px;
}
#font {
font-family: 'Cabin Sketch';
font-style: normal;
font-weight: 400;
color: #333;
font-size: 14px;
}
​
Preview in Chrome
So it is correct, as you see above, it supports non alphabetical characters. Run the fiddle to see yourself. Hope that helps!

Safari Eliminates Word-Spacing for H1 Tag That Uses Typekit

I am using Typekit to load the league-gothic font and for some reason Safari is completely eliminating the word-spacing so there are no gaps between the words. Before I go with a css hack, I was wondering if anyone could help. Here is the html:
<div class="page-header">
<h1 data-name="about">About Campaign Title</h1>
</div>
And here is the CSS:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
}
I tried placing an h1 tag all over the page and still saw the problem. I also set word-spacing to both inherit and normal, seeing the same result.
Thanks.
This turned out to be a problem with the new text-rendering property. We are using bootstrap.css from Twitter and Bootstrap had the text-rendering property set to optimizeLegibility. We set it back to auto as follows:
h1 {
font: 70px/normal "league-gothic", sans-serif;
text-transform: uppercase;
color: #4e4e4e;
text-rendering: auto;
}