.fib,
.fi {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
}

.fi {
  display: inline-block;
  line-height: 1em;
  position: relative;
  width: 1.333333em;
}

.fi::before {
  content: "\00a0";
}

.fi-br { background-image: url("flag-br.svg"); }
.fi-cn { background-image: url("flag-cn.svg"); }
.fi-de { background-image: url("flag-de.svg"); }
.fi-es { background-image: url("flag-es.svg"); }
.fi-fr { background-image: url("flag-fr.svg"); }
.fi-id { background-image: url("flag-id.svg"); }
.fi-it { background-image: url("flag-it.svg"); }
.fi-jp { background-image: url("flag-jp.svg"); }
.fi-kr { background-image: url("flag-kr.svg"); }
.fi-ru { background-image: url("flag-ru.svg"); }
.fi-sa { background-image: url("flag-sa.svg"); }
.fi-th { background-image: url("flag-th.svg"); }
.fi-tr { background-image: url("flag-tr.svg"); }
.fi-tw { background-image: url("flag-tw.svg"); }
.fi-us { background-image: url("flag-us.svg"); }
.fi-vn { background-image: url("flag-vn.svg"); }