Estou criando um reprodutor de áudio usando vanilla JS para manipular o HTML<audio> elemento.

O player é de tamanho dinâmico, com todos os elementos dimensionados para se ajustarem ao DIV pai.

Apliquei todos os métodos que encontrei para dimensionar a fonte para caber no contêiner pai e nas soluções combinadas de uma maneira que parece funcional, no entanto, não posso fazer a escala de ícones impressionantes da fonte da mesma maneira.

Os ícones estão contidos da seguinte maneira:

HTML:

<div>
  <button>
    <a>
      <i class="fa fa-play">
      </i>
    </a>
  </button>
</div>

Minha solução funciona implementandowindow.addEventListener('resize', resizeFont);, com oresizeFont função definida da seguinte forma:

JS:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

Defino o tamanho da fonte dodiv,button oua elemento no CSS para fornecer alguma entrada para o padrão do font-awesomefont-size: inherit estilo.

oresizeFont(); A função é chamada uma vez no carregamento da página, garantindo que as fontes exibidas sejam dimensionadas para se ajustarem ao tamanho inicial do reprodutor de áudio.

Eu tentei aplicar o.resize classe para vários elementos com os seguintes resultados:

div : a fonte não será exibida ou a fonte será exibida no tamanho padrão e desaparecerá no redimensionamento da janela.

a : mesmo resultado quediv.

i : resizeFont() ao carregar a janela, O ícone é dimensionado no tamanho correto para caber no contêiner, mas a fonte ainda desaparece quando o evento de redimensionamento da janela é acionado.

Então, acho que o.resize classe deve ser aplicada aoi elemento, mas que de alguma forma eu preciso definir seu tamanho, ou o tamanho do seu contêiner, de maneira diferente.

Para sua informação, atualmente estou usando este HTML para cada botão:

HTML:

<div>
  <button>
    <a>
      <i class="fa fa-play resize" aria-hidden="true"></i>
    </a>
  </button>
</div>