You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@cordova.apache.org by GitBox <gi...@apache.org> on 2020/06/11 13:13:11 UTC
[GitHub] [cordova-plugin-inappbrowser] rufiange opened a new issue #724: Material Icons using Google Web Fonts Not loading
rufiange opened a new issue #724:
URL: https://github.com/apache/cordova-plugin-inappbrowser/issues/724
# Bug Report
## Problem
Material Icons does not work properly ; they do not appear in the in app browser window opened on the app side.
### What is expected to happen?
The Material icon should render on ios and android.
### What does actually happen?
It seems the CSS sheet basically this HTML code: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
does not work as expected.
A workaround is to load the CSS in the HTML page itself rather than by using the link href tag.
## Information
<!-- Include all relevant information that might help understand and reproduce the problem -->
### Command or Code
<!-- What command or code is needed to reproduce the problem? -->
A minimal JSP to reproduce the problem:
**material-test.jsp**
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<i class="material-icons">lock</i>
</body>
</html>
Using ionic in app browser:
=> this.iab.create('....materials-test.jsp', '_blank', '');
KO - the opened window does not show the material lock icon.
WORKAROUND
Instead of using the link tag, use the following:
<style>
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v52/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
</style>
<i class="material-icons">lock</i>
Result: the lock material icon now displays as expected.
(Also using base64 it works)
However it's not convenient.
How to make it work for the basic scenario?
### Environment, Platform, Device
<!-- In what environment, on what platform or on which device are you experiencing the issue? -->
Tested on Android Emulator, using ionic
### Version information
<!--
What are relevant versions you are using?
For example:
Cordova: Cordova CLI, Cordova Platforms, Cordova Plugins
Other Frameworks: Ionic Framework and CLI version
Operating System, Android Studio, Xcode etc.
-->
Ionic:
Ionic CLI : 6.5.0 (....nvm/versions/node/v12.0.0/lib/node_modules/@ionic/cli)
Ionic Framework : ionic-angular 3.9.9
@ionic/app-scripts : 3.2.4
Cordova:
Cordova CLI : 8.0.0
Cordova Platforms : android 7.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 4 other plugins)
Utility:
cordova-res : not installed
native-run (update available: 1.0.0) : 0.2.9
System:
Android SDK Tools : 26.1.1 (/Users/srufiange/Library/Android/sdk/)
ios-deploy : 1.10.0
NodeJS : v12.0.0 (/Users/srufiange/.nvm/versions/node/v12.0.0/bin/node)
npm : 6.14.5
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c
## Checklist
<!-- Please check the boxes by putting an x in the [ ] like so: [x] -->
- [X ] I searched for existing GitHub issues
- [X ] I updated all Cordova tooling to most recent version
- [ ] I included all the necessary information above
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-plugin-inappbrowser] timbru31 commented on issue #724: Material Icons using Google Web Fonts Not loading
Posted by GitBox <gi...@apache.org>.
timbru31 commented on issue #724:
URL: https://github.com/apache/cordova-plugin-inappbrowser/issues/724#issuecomment-663070756
Works fine for me. This is/was probably a network bug or firewall restriction on your end.
If the problem persists, please create a reproducible plain Cordova app without Ionic.
More information on how to create one: https://github.com/apache/cordova-contribute/blob/master/create-reproduction.md
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org
[GitHub] [cordova-plugin-inappbrowser] timbru31 closed issue #724: Material Icons using Google Web Fonts Not loading
Posted by GitBox <gi...@apache.org>.
timbru31 closed issue #724:
URL: https://github.com/apache/cordova-plugin-inappbrowser/issues/724
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: issues-unsubscribe@cordova.apache.org
For additional commands, e-mail: issues-help@cordova.apache.org