I want to display a unicode character centered in a button, see

```
<div class="col-xs-1">
    <button class="btn btn-tool">
      <span></span>
    </button>
  </div>

span:before {
  font-family: "Arial Unicode MS";
  content: "\25cf";
  font-size: 3em;
  vertical-align: middle;
}

```

As described [here](https://stackoverflow.com/questions/23750346/how-to-resize-unicode-characters-via-css), I tried to resize the character using 

> 
> font-size
> 
> 
> 

and 

> 
> vertical-align.
> 
> 
> 

As can be seen in the [JSFiddle](https://jsfiddle.net/g8skps53/6/.), the alignment is not as desired (character centered both horizontically and vertically).
Can you please assist?