Items on circle - A Sass version of Ana's work consisting on putting items on circle with CSS: http://stackoverflow.com/questions/12813573/position-icons-into-circle. Made a mixin to make everything easy to use. Just set the size of the circle and the number of items to place. codepen via http://codepen.io/HugoGiraudel/.

items-on-a-circle.html

<ul class='circle-container'>
  <li><a href='#'><img src='http://lorempixel.com/100/100/city'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/nature'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/abstract'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/cats'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/food'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/animals'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/business'></a></li>
  <li><a href='#'><img src='http://lorempixel.com/100/100/people'></a></li>
</ul>

script.js

/**
 * Apply a class to each child
 * Required for IE8-
 */
$('.circle-container').children().each(function() {
  $(this).addClass('item'+($(this).index() + 1));
});

style.scss

@import "compass";
/**
 * Mixin to put items on a circle
 * [1] - Allows children to be absolutely positioned
 * [2] - Allows the mixin to be used on a list
 * [3] - In case box-sizing: border-box has been enabled
 * [4] - Allows any type of direct children to be targeted
 */

@mixin putOnCircle( 
          $nb-items, //Number of items
          $circle-size, //Parent size
          $item-size, //Item size
          $class-for-IE: false //Base class name, false means use of pseudo-selectors
       ) {
  $half-item:     $item-size / 2;
  $half-parent: $circle-size / 2;
  
  position: relative;               /* [1] */
  width:  $circle-size;
  height: $circle-size;
  padding: 0;
  border-radius: 50%; 
  list-style: none;                 /* [2] */ 
  @include box-sizing(content-box); /* [3] */ 
  
  > * {                             /* [4] */
    display: block;
    position: absolute;
    top:  50%; 
    left: 50%;
    width:  $item-size;
    height: $item-size;
    margin: -$half-item;
  
    $angle: 360 / $nb-items;
    $rot: 0;
    @for $i from 1 to $nb-items+1 {
      
      // If no support for IE8-
      
      @if $class-for-IE == false {
        &:nth-of-type(#{$i}) {
          @include transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg));
        }
      }
      
      // If support for IE8-  
      
      @else {
        &.#{$class-for-IE}#{$i} {
          // If CSS transforms are not supported
          $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
          $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
          margin: $mt 0 0 $ml;
        }
      }
      $rot: $rot + $angle;
    }
  }
}

.circle-container {
  @include putOnCircle(8, 20em, 6em, false); 
  margin: 5em auto 0;
  border: solid 5px tomato;
  
  a {
    display: block;
    border-radius: 50%;
    box-shadow: 0 0 0 5px tomato;
  }
  
  img { 
    display: block; 
    width: 100%; 
    border-radius: 50%;
    @include  filter(grayscale(100%));
    
    &:hover {
      @include filter(grayscale(0));
    }
  }
}