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

2 Answers 2

Reset to default
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, 2015 at 11:13
  • Please, create new question. An validate response if it fix your problem
    – GeoStoneMarten
    Dec 20, 2015 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, 2015 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, 2015 at 10:34
  • I only solve the #morteza malvandi's problem
    – MohammadReza Hasanzadeh
    Dec 19, 2015 at 10:54
  • @MohammadRezaHasanzadeh just add part of change and explain it's more easy to undertand. I remove non usefull
    – GeoStoneMarten
    Dec 19, 2015 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, 2015 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, 2015 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.