Шесть иконок SVG, выравнивающих центр в нижнем колонтитуле

Question

У меня есть шесть SVG-иконок с именами, и я хочу поместить их в нижний колонтитул. После размещения имена отображаются в две строки вместо одной строки. то есть «s player», где «s» отображается над «player», а не в одной строке на небольших устройствах, так как сделать так, чтобы решить эту проблему? И иконки SVG должны располагаться в центре по отношению к именам. Вот код

.footer {
    position: fixed;
    bottom: 0px;
    background-color: white;
    height: 45pt;
    width: 100%;
    padding: 2pt 8pt;
    border-top: 1pt solid #f3f3f4;
}

span {
  font-family: Segoe Script;
}

.super {
  color: #9400D3;
  text-size-adjust: inherit;
}

.duper {
  color: #4B0082;
}

.champ {
  color: #0000FF;
}

.good {
  color: #FF7F00;
}

.hero {
  color: #FF0000;
}

.king {
  color: #00BD13;
}

<div class="footer">
        <div class="row">
        <div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <img src="/images/abc.svg" alt="Player1">
            <div><span class="super">s</span> Player</div>
        </div>
        <div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <img src="/images/bcd.svg" alt="Player2">
            <div><span class="duper">d</span> Player</div>
        </div>
        <div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <img src="/images/cde.svg" alt="Player3">
            <div><span class="champ">c</span> Player</div>
        </div>
        <div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <img src="/images/def.svg" alt="Player4">
            <div><span class="good">g</span> Player</div>
        </div>
        <div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <img src="/images/efg.svg" alt="Player5">
            <div><span class="hero">h</span> Player</div>
        </div>
        <div class="col s2 col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <img src="/images/fgh.svg" alt="Player6">
            <div><span class="king">k</span> Player</div>
        </div>
        </div>