Producing a timezone icon using fontawesome

Question

Has anyone ever done a nice looking timezone icon with font-awesome? I was thinking perhaps the world and time together, but I cannot get it looking nice.

<span class="fa-stack">
  <i class="fa fa-globe fa-stack-2x"></i>
  <i class="fa fa-clock-o fa-stack-1x"></i>
</span>

The above is maybe a starting point but I would have to change colors or something, or maybe style them myself side by side rather than stacked- so I wondered if someone already had something that looked good? It does not need to be world and time, could be something else that means timezone to a user.

Answer 1

Something like this. The key is to get the colors to be different enough that the clock stands out, and to put the clock in an appropriate spot.

<span class="fa-stack">
<i class="fa fa-globe fa-stack-2x"></i>
<i class="fa fa-clock-o fa-stack" style="color: #ccc; text-align: right; margin-right: 0.35em; margin-top: 0.25em; right: 0; position: absolute;"></i>
</span>

https://jsfiddle.net/01h9p7xx/