Languages

Menu
Sites
Language
Sams. Gear S watch-face WEB APP , problem when implentation MaterialDisign Google fonts in APPs

"Samsung Gear S watch-face S watch-face, problem when implentation MaterialDisign Google fonts "

 

Gear S watch-face, Tizen WEB APP

Try to make implentation MaterialDisign Google fonts and have a some problems:

 

CSS 

.......

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../css/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../css/fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(../css/fonts/MaterialIcons-Regular.woff) format('woff'),
       url(../css/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 36px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  position: absolute;
  left: 150px;
  top: 100px;
  color: rgba(255, 255, 255, 1);
  text-rendering: optimizeSpeed;
  }

...

 

HTML:

...

WORK :

<div class="material-icons  batteryyc" id="batteryy">&#xE1A3;</div>

NOT WORK (crash CSS of the page app):

<div class="material-icons  batteryyc" id="batteryy">battery_charging_full</div>

..

 

Not WORK: JS+HTML:

.....

<div class="material-icons md-18 batteryyc" id="batteryy">&#xE1A3;</div>

..

document.getElementById("batteryy").textContent ="&#XE1A5;";

...

 

Why?

 

Google DOCs:

https://www.google.com/design/icons/#ic_battery_charging_full

http://google.github.io/material-design-icons/

It’s easy to incorporate icons into your web page. Here’s a small example:

<i class="material-icons">face</i>

For browsers that do not support ligatures, fall back to specifying the icons using numeric character references like the example below:

<i class="material-icons">&#xE87C;</i>

 

etc

View Selected Answer
List

Responses

8 Replies
daniel kim

Hi,

It seems that Tizen doesn't support ligature for now. I'm expecting that it will support it soon.

Regards

Denis Miroshnikov

Ok i'ts  so strange.

   also  how I can do that now:

it's also Not WORK (  if i send text of the icon fron JS I'm see that -"&#XE A" instead selected ICON) ;

....

HTML: <div class="material-icons md-18 batteryyc" id="batteryy">&#xE1A3;</div>    - This TAG working good is place it in the HTML directly

.. but if i send from JS  - NO ! (((

JS: document.getElementById("batteryy").textContent ="&#XE1A5;";

 

 

...

Denis Miroshnikov

Hi, Please loot at my mast post V.

 

TNXaLOT
 

daniel kim

Yes. It's working well. but I don't know how tizen support ligature in this case.

Thanks

Denis Miroshnikov

no !  not work ! BAGES !   only MD-Icons working well

mdl-badge mdl-badge--no-background
daniel kim

Hi,
It took some times to get image vi wifi. but I could see the badge with below code.

    <i class="mdl-badge mdl-badge--no-background"  data-badge="4" >Moods</i>

  <i class="mdl-badge mdl-badge--no-background"  data-badge="7" >Inbox</i>

Regards

Denis Miroshnikov

hi, i'm solove that all !  :))

 

  but only thith code of the icon names not work !   also bages work good now.

 

  what engine user in browser for watchface?

 

TNX

Mark as answer
Denis Miroshnikov

Okay , i'm  find one solution for make some code with MD icons in watchface, but MD-BADGES  still on the "dark side"  ))

DOCS: http://www.getmdl.io/components/index.html#badges-section

 try to make this test code in the HTML of the watch face and look were is bages?
 

<html>
<head>
  <!-- Material Design Lite -->
  <script src="https://storage.googleapis.com/code.getmdl.io/1.0.3/material.min.js"></script>
  <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.3/material.brown-deep_orange.min.css" />
  <!-- Material Design icon font -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  
</head>
<body>
  <br>
  <br>
  <div class="material-icons mdl-badge mdl-badge--no-background" data-badge="99">sms</div>
  <br>
  <em class="material-icons mdl-badge" data-badge="99">&#xE625;</em>
  <br>
  <i class="material-icons">&#xE625;</i>
  <br>
  <br>
</body>
</html>