.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  height: 24px;
  width: 24px;
  &:before {
    content: '\00a0';
  }
}

// https://github.com/HatScripts/circle-flags/

@mixin flag-icon($country) {
  .flag-icon-#{$country} {
    background-image: url('../img/flags/#{$country}.svg');
  }
}
$countries: es fr gb ru tr uk cn;
@each $country in $countries {
  @include flag-icon($country);
}