icon with label or text in openlayers 3, offset

Question

I need to add an icon and add a text on botton of the image. How can I do this ?

I tried with this styles, but the text is rendered in the middle of the image.

var vector = new ol.layer.Vector({
      source: new ol.source.Vector({
        projection: ol.proj.get('EPSG:4326')
      }),
      style: new ol.style.Style({rules: [
        new ol.style.Rule({
          symbolizers: [
            new ol.style.Icon({
                url: 'http://127.0.0.1/app/img/imageTest.png',
                opacity: 0.75,
                width: 12,
                height: 12
            }),
            new ol.style.Text({
                color: '#000',
                text: ol.expr.parse('i'),
                fontFamily: 'Calibri,sans-serif',
                fontSize: 12
            })
          ]
        })
      ]})
    });
map.addLayer(vector);

var f = new ol.Feature({
    'i': 1,
    'size': 20
});
f.setGeometry( new ol.geom.Point([lon,lat]) );

var features = new Array();
features.push(f);
vector.addFeatures(features);

Answer 1

I am using this code with a Canvas and it works with OL v3.0.0-beta.5:

 function getTextStyle(text, offsetX) {
    return new ol.style.Text({
      fill : new ol.style.Fill({
        color : '#330'
      }),
      stroke : new ol.style.Stroke({
        color : '#fff',
        width : 4
      }),
      text : text,
      font : '12px Verdana',
      offsetX : offsetX ? offsetX : 0,
      offsetY : 12
    });
  }

Also see what is now an 'experimental' documentation: http://ol3js.org/en/master/apidoc/ol.style.Text.html (edit: it was experimental in 2014 ...)

Answer 2

You need to move the label by using "labelYOffset".

If your graphic is 20px high, try shifting it down by 12px

        new ol.style.Text({
            color: '#000',
            fontFamily: 'Calibri,sans-serif',
            fontSize: 12,
            label:"${NAME}",
            labelYOffset: -12
        })

The "label" parameter draws from the NAME field in an external file. The label align parameter is usually used in a style or style map. You will need to adjust this to reflect where your data is coming from.
Note that labelXOffset and labelYoffset are not supported in the Canvas renderer. So you need to ensure that your layer is using SVG for this to work. eg.

var point = new OpenLayers.Layer.Vector("GeoJSON", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    styleMap: mystyle,
    protocol: new OpenLayers.Protocol.HTTP({
        url: "kml/my.geojson",
        format: new OpenLayers.Format.GeoJSON()
    }),
    renderers: ["SVG"]
});