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);

Solution

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 ...)