1

I'm developing an application using openlayers 3.11.2. I have a point layer. I want to style this layer using font-icon base of this question. When I use FontAwesome fonticon, It work correctyl, But when I use My fonticon, It dose not work correctyl.

Note:
I created my fontIcon at icomoon.io.

Where is the problem?

Edit:
I define the style as follow:

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: '\e900',
    font: 'normal 18px MyFontIcon',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white',
    })
  })
});
Improve this question
2
4

When you work with font, it's necessary to know if your code work in unicode or not. Today UTF8 is a standard (unicode) codepage.

In this situation, you need use \u before the code and not just \

For read easiest, you can set a dict in specific javascript file (or directly in your code) for exemple:

my_unicode_font.js

var Icon = {
    Ok : "\uf000",
    Bad : "\uf001",
    Search : "\uf002",
    // and others in your webfont.ttf (change with corresponding utf8 code)
    }

in file.htm

<html>

   <head>
      <script type="text/javascript" src="my_unicode_font.js" ></script>
   </head>

   <body>
      .......
   </body>
</html>

and in your script part

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: Icon.Ok, // my font caracter
    font: 'normal 18px MyFontIcon',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white',
    })
  })
});
Improve this answer
3
  • I want to use fonticon dynamically. My features have an code as : feature1->001, feature2->002, and etc. But when I want to use "\uf" + feature.get("code") it error, how Can i fix this error? – Morteza Malvandi Dec 20 '15 at 11:13
  • Please, create new question. An validate response if it fix your problem – GeoStoneMarten Dec 20 '15 at 13:51
  • 1
    @mortezamalvandi you can try in this case String.fromCharCode(parseInt(feature.get("code"))) if your code is in hexa, use String.fromCharCode(parseInt(feature.get("code"), 16)) – GeoStoneMarten Dec 21 '15 at 13:10
1
+100

Set \ue900 to text as follow:

var style = new ol.style.Style({
  text: new ol.style.Text({
    text: '\ue900',
    font: 'normal 18px MyFontIcon',
    textBaseline: 'Bottom',
    fill: new ol.style.Fill({
      color: 'white',
    })
  })
});

I don't know why it worked correctly with this small change, But I think \u define unicode.

Improve this answer
6
  • You might want to explain why, rather than just copying the answer to the linked question on SE? – John Powell Dec 19 '15 at 10:34
  • I only solve the #morteza malvandi's problem – MohammadReza Hasanzadeh Dec 19 '15 at 10:54
  • @MohammadRezaHasanzadeh just add part of change and explain it's more easy to undertand. I remove non usefull – GeoStoneMarten Dec 19 '15 at 11:04
  • I would also like to see a more detailed explanation about the \u part. Yes, it is unicode, more specifically it is the unicode escape sequence in JS. I would strongly recommend removing the part "I don't know why it worked", researching the phenomenon you are not familiar with, and giving a decent answer. A good starting point can be found here. – Gabor Farkas Dec 19 '15 at 11:10
  • I want to use fonticon dynamically. My features have an code as : feature1->001, feature2->002, and etc. But when I want to use "\uf" + feature.get("code") it error, how Can i fix this error? – Morteza Malvandi Dec 20 '15 at 11:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.