My angular application is hosted on a server with no internet connection, because of that, I removed the following code from my index.html:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
And downloaded them via npm: npm install material-design-icons --save
And added them like this in my idex.html :
<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
Everything seems fine, mostly of the icons work except for this one:
No matter if I use it like this:
<span class="material-icons">
read_more
</span>
or this
<mat-icon
read_more
</mat-icon>
or even as the character code, since I thought it has something todo with ligatures (I took the code from here https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints)
<mat-icon>
</mat-icon>
It does work if I use <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> in my index.html and have an internet connection, but I need to find a way for it to work without an internet connection.
Has anybody an idea?
I solved my problem by using "fontface": https://github.com/fontsource/fontsource
I installed int by using npm install #fontsource/material-icons, this adds the following folder:
I replaced added in my main style file with the following:
.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;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
And in my main styles file (I use scss) I added the following:
#import "~#fontsource/material-icons/index.css";
That did the trick for me. I also were able to use the icon without the code:
<mat-icon>read_more</mat-icon>
Try to add it in angular.json rather than index.html. Also, check if that icon is available in the version you have downloaded. Try to downgrade the package and run the npm install command.
Related
A few months ago, my webfonts stopped worked on the iOS mail client. I'm not the only one to have experienced this.
The code I am using is this:
<link rel="stylesheet" id="magazine-font-aleo-css" href="https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css" type="text/css">
You can view the resulting CSS for yourself, but here's an extract:
#font-face {
font-family: 'Aleo';
src: url('aleo/Aleo-Regular-webfont.eot');
src: url('aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('aleo/Aleo-Regular-webfont.woff2') format('woff2'),
url('aleo/Aleo-Regular-webfont.woff') format('woff'),
url('aleo/Aleo-Regular-webfont.ttf') format('truetype'),
url('aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
The font is then applied inline on the body tag.
<body style="background-color:#f0f0f0; color:#333; font-family:Aleo, serif; font-size:18px; font-weight:400; line-height:1.625;margin:0;">
I can't find any documentation as to what's changed on iOS. I'd be glad to receive answers that either (a) tell me what the problem is, or (b) give advice on how I can diagnose the issue.
A couple things you could try:
1. The Litmus thread you linked suggests using #import instead of <link> to reference the font files. So:
<style>
#import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
</style>
2. I've had recent success getting web fonts to display in iOS Mail using the <link> tag, but my code looks like this:
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<!--<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700" rel="stylesheet">
<!--<![endif]-->
This hides the <link> tag from Outlook, which seems to choke on it and cause problems. I've just tested this in Litmus and it display the web font.
Another thing to check with your original code is to move as and hard-code full URLs.
<style>
#import url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo.css);
#font-face {
font-family: 'Aleo';
src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot');
src: url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff2') format('woff2'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.woff') format('woff'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.ttf') format('truetype'),
url('https://www.evangelicalmagazine.com/wp-content/themes/evangelical-magazine/fonts/aleo/Aleo-Regular-webfont.svg#aleoregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
I tried almost all the available option, but my font is not included in generated PDF file.
I tried base64 bit solution , converting css files to .scss and many more.
Everything is defined and pre compiled under assets.rb , application.rb.Please let me know if there is anything I am missing. I followed the solutions http://apleroy.com/posts/custom-pdf-fonts-with-wicked_pdf-and-heroku but in vain. Sample Code:
#font-face {
font-family: 'Source Sans Pro Light';
src: url(data:font/truetype;charset=utf-8;base64,T1RUTw..)
}
.custom_font {
font-size: 24px;
font-family: 'Source Sans Pro ExtraLight';
}
This is the CSS code sample I am using
Basic Layout
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<%= wicked_pdf_stylesheet_link_tag "filename"-%>
</head>
<style>
#font-face {
font-family: 'proximanova';
src:url(data:font/truetype;;charset=utf-8;base64, AAA.....);
}
</style>
<body >
<%= yield %>
</body>
</html>
I earlier included the font-face in filename.css but did not work.
try absolute path to your_font.ttf
src: url('file:///path/to/your_font.ttf') format('truetype')
I finally solved the problem, I had font "fontname" and its sub classes as regular light lighter etc. Earlier I was using font-family: 'fontname' which was not rendered correct I guess.
When I used font-family: 'fontname regular' it work fine.
I have been tearing my hair out over this for over a week now...
TL;DR: hash based links stop working in Safari on iOS 7 after a certain number of clicks.
We had a strange issue in our Angular Dart application - people using iPhones reported that links were "freezing" after "a while". The typical non helpful error reports, so we had to work hard to figure out exactly how to replicate the issue.
It eventually became clear that after the same number of clicks each time, Safari on iOS 7 would just stop navigating to the hash based route links.
After much diagnosis (removing bits of the app piece by piece until the issue stopped happening), I've managed to narrow it down to routes which contain parameters. After these routes are followed a certain number of times, Safari on iOS 7 just stops following them - it's like they get "half" clicked - the link gets underlined, but it is never followed, and subsequently no amount of clicking on it will allow it to be followed.
Here is a very simple dart application that will replicate the issue:
In the root folder:
pubspec.yaml:
name: DartRouteChecker
description: A sample web application
dependencies:
angular: 0.14.0
browser: any
transformers:
- angular
Then in the web folder:
dartroutechecker.dart:
library dart_route_checker;
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
class MyAppModule extends Module {
MyAppModule() {
bind(NgRoutingUsePushState, toValue: new NgRoutingUsePushState.value(false));
bind(RouteInitializerFn, toImplementation: Routes);
}
}
void main() {
applicationFactory()
.addModule(new MyAppModule())
.run();
}
#Injectable()
class Routes
{
void call(Router router, RouteViewFactory views) {
views.configure({
'route1': ngRoute(path: '/route1', defaultRoute: true, view: 'route1.html'),
'route2': ngRoute(path: '/route2/:id', view: 'route2.html')
});
}
}
dartroutechecker.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DartRouteChecker</title>
<script async type="application/dart" src="dartroutechecker.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="dartroutechecker.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>
dartroutechecker.css
body {
background-color: #F8F8F8;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
font-weight: normal;
line-height: 1.2em;
margin: 15px;
}
h1, p {
color: #333;
}
#sample_container_id {
width: 100%;
height: 400px;
position: relative;
border: 1px solid #ccc;
background-color: #fff;
}
#sample_text_id {
font-size: 24pt;
text-align: center;
margin-top: 140px;
-webkit-user-select: none;
user-select: none;
}
route1.html:
<h1>ROUTE 1</h1>
<div>
Go to second route
</div>
route2.html:
<h1>ROUTE 2</h1>
<div>
Go to first route
</div>
Use pub build to build the app (generate javascript), then navigate to it using an iPhone with iOS 7 (I tested it on an iPhone 5 and an iPhone 4S both with iOS 7.1.2). Click on "Go to second route" then "Go to first route" over and over again until you get to around 30 clicks - the link will then stop responding... It's almost always exactly 30 clicks that will cause it (though I have once or twice seen it be around 43, though I can't be sure I didn't click something else during those times - I've done so much stinkin' clickin' in the last week that I feel I'm going slightly insane...)
I can't replicate this issue when the iPhone is plugged in to a mac to debug it. It also doesn't happen if neither of the routes contains a parameter. And it happens with FEWER clicks if there are more routes defined in the route initialisation class, or if the routes contain multiple parameters. Initially I thought that the problem might have been that one of our routes had an ampersand in it, but that didn't turn out to be the case. And it doesn't happen at all in any other browsers, including Chrome on iOS.
I suspect this might be a bug in Safari (possibly related to Safari not handling hashchanges correctly, and not handling browser history correctly when using appcache (which, BTW, I am not using here)), but this is a real showstopper for us here - many of our customers are using iPhones, so if our app keeps freezing on the standard browser on an iPhone, we're in a lot of strife.
Has anyone seen anything like this before? Anyone have any suggestions for a workaround? Or a new career?.....
EDIT:
We have tracked the issue down to the route method in route.dart:
https://github.com/angular/route.dart/blob/master/lib/client.dart#L480
In the method gotoUrl (https://github.com/angular/route.dart/blob/master/lib/client.dart#L782), if we change it from route(url).then((success) { to new Future.value(true).then((success) { then the issue no longer occurs - of course then we lose all the "preenter" etc etc functionality that routing provides. But it seems that somewhere in that route function, something is going awry...
According to this issue linked in the comments by Günter, this has been fixed in 0.5.0 by this commit.
I can't understand what part of that commit fixes it from reading the code; so hopefully 0.5 is a relatively compatible version to upgrade to!
I am using Grails 2.1.0 and Twitter Bootstrap Plugin 2.1.1 and am encountering an issue with navbar-fixed-top.
In order to get the Navbar fixed to the top of the page to behave correctly during resize, the Twitter Bootstrap Docs states:
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the . Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
How can I do this when using the Grails Plugin for Twitter Bootstrap?
Here is what I have tried:
main.gsp
<head>
...
<r:require modules="bootstrap-css"/>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<r:require modules="bootstrap-responsive-css"/>
<r:layoutResources/>
</head>
The problem is that Grails Plugin for Twitter Bootstrap takes the content of bootstrap.css and bootstrap-responsive.css and combines them into the following merged file: static/bundle-bundle_bootstrap_head.css.
Thus, I am not able to put the body padding style "after core Bootstrap CSS and before Responsive CSS" as per Twitter Bootstrap docs.
Here is the View Source HTML that I get from the main.gsp above
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link href="/homes/static/bundle-bundle_bootstrap_head.css" type="text/css"
rel="stylesheet" media="screen, projection" />
If there is no way to do this, I could always just drop the Grails Twitter Bootstrap Plugin and manually download Twitter Bootstrap and put it my Grails Project's web-app/css, web-app/images, and web-app/js. However, I would like to be able to use the Grails Twitter Bootstrap Plugin.
Thank you very much in advance, I appreciate it!
Bootstrap recommends that place for the style because when the screen width goes below 980px navbar becomes static (not fixed). So calling bootstrap-responsive.css after the padding prevents from a blank space at the top in mobile devices (there's not fxed element to fill that padding).
You can reproduce this behaviour using a media query:
#media (min-width:980px) {
body {
padding-top: 40px;
}
}
Put this CSS anywhere in your stylesheets, and don't worry about your <links>
I am encountering a weird problem when printing a site using IE8. The problem occurs after the print (or print-preview) dialog box closes, the web page goes entirely blank (white) even though the page prints fine. Refreshing fixes the issue.
I have recently included a print stylesheet which has #font-face declarations. Removing the #font-face declarations stops the issue from occurring. My font-face declarations are as follows:
#font-face {
font-family: 'FONT';
font-weight: normal;
font-style: normal;
src: url('../fonts/FONT.eot');
src: url('../fonts/FONT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/FONT.woff') format('woff'), /* Modern Browsers */
url('../fonts/FONT.ttf') format('truetype'); /* Safari, Android, iOS */
}
I've tested this in IE7, IE8, IE9 and recent versions of Safari, Chrome & Firefox. The problem only happens in IE8.
Has anyone else experienced this and know a solution?
I had the same issues as you. Got lucky and found out that the issue is caused by the relative path in the urls of your font files! To fix your IE8 page-goes-blank problem after print or print preview, just replace your relative '../fonts/FONT.eot' paths with absolute paths. In my case, we keep our fonts in /inc/css/fonts. So I would update my url paramters to something like
#font-face {
font-family: 'FONT';
font-weight: normal;
font-style: normal;
src: url('/inc/css/fonts/FONT.eot');
src: url('/inc/css/fonts/FONT.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/inc/css/fonts/FONT.woff') format('woff'), /* Modern Browsers */
url('/inc/css/fonts/FONT.ttf') format('truetype'); /* Safari, Android, iOS */
}
Again, I had the same problem as you where the issue only happens in IE8 (compat mode off). It's a problem we had to solve because, even as of August 2012, 40% of our web users are still in IE8. Hope this helps!