Creating new buttons and removing default ones - Openlayers-3

Question

I am trying to create new buttons but I seem to use the wrong function. To delete the default buttons I added the following code:

var map = new ol.Map({
  target: 'map',
  controls: [],
  layers: [
  new ol.layer.Tile({ ... etc

This works great. Now I am trying to connect a button I created with HTML (id=btnZoomOut) to the Zoom function:

var buttonZoomOut = new ol.control.Control({element: $('#btnZoomOut')});
map.addControl(new ol.control.Zoom({target: buttonZoomOut}));

But this does not seems to works and trows an error:

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).appendChild is not a function

How to correctly do this?

Answer 1

To change zoom buttons:

map.addControl(new ol.control.Zoom({
    className: 'custom-zoom'
}));

CSS, this is up to you:

.custom-zoom{
    bottom: .5em;
    left: .5em;
}
.custom-zoom button{
    background-color: rgba(40, 40, 40, .7);
    border-radius: 50%;
}

To create new controls: Openlayers simple custom control example

Answer 2

If you want to use font awesome icons then

var button = document.createElement('button');
button.innerHTML = '<i class="fa fa-home"></i>';

var handleRotateNorth = function(e) {
    map.getView().setRotation(0);
};

button.addEventListener('click', handleRotateNorth, false);

var element = document.createElement('div');
element.className = 'rotate-north ol-unselectable ol-control';
element.appendChild(button);

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
    rotation: 0
  }),
  controls:ol.control.defaults().extend([
          new ol.control.Control({
            element:element
          })
        ])
});

jsfiddle working code