Vanilla JS：调整font-awesome以适应容器 [英] Vanilla JS: Resize font-awesome to fit container

问题描述

我一直在使用vanilla JS创建一个音频播放器来操作HTML < audio> 元素。

I have been creating an audio player using vanilla JS to manipulate the HTML <audio> element.

播放器具有动态大小，所有元素都缩放以适合父DIV。

The player is of dynamic size, with all elements scaled to fit the parent DIV.

我已经应用了所有可以找到的缩放字体以适合父容器的方法以一种看起来很有效的方式组合解决方案，但是我无法以相同的方式缩放字体 - 图标。

I have applied all methods I can find for scaling font to fit the parent container and combined solutions in a way that seems functional, however I cannot make font-awesome icons scale in the same way.

图标包含在以下方式中：

The icons are contained in the following way:

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

我的解决方案是通过实现 window.addEventListener（'resize'，resizeFont）来实现的; ， resizeFont 函数定义如下：

My solution works by implementing window.addEventListener('resize', resizeFont);, with the resizeFont function defined as follows:

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 + '%';
    }
  }
}

我设置字体大小CSS中的 div ，按钮或一个元素为font-awesome的默认 font-size：inherit 样式提供一些输入。

I set font-size of the div,button or a element in CSS in order to provide some input for font-awesome's default font-size: inherit style.

resizeFont（）; 函数在页面加载时被调用一次，确保显示的字体被缩放以适合音频播放器的初始大小。

The resizeFont(); function is called once on page load, ensuring that the fonts displayed are scaled to fit the audio player's initial size.

我试图将 .resize 类应用于各种元素，结果如下：

I have attempted to apply the .resize class to various elements with the following results:

div ：字体不会显示，或字体显示为默认大小，然后在窗口调整大小时消失。

div : font won't display, or font displays at default size and then disappears on window resize.

a ：与 div 相同的结果。

i ： resizeFont（）在窗口加载时将图标缩放到适合容器的正确大小，但是当窗口调整大小事件时字体仍然消失解雇。

i : resizeFont() on window load DOES scale the icon to the correct size to fit the container, but the font still disappears when the window resize event is fired.

所以，我想那是 .resize 类应该应用于 i 元素，但我不知何故需要以不同的方式定义其大小或容器的大小。

So, I guess that the .resize class is supposed to be applied to the i element, but that I somehow need to define its size, or its container's size, differently.

推荐答案

将类 .jcfResize 添加到包含字体的任何元素中调整大小。

Add the class .jcfResize to any elements containing font which should be resized.

将以下javascript代码添加到页面/网站：

Add the following javascript code to the page/site:

function jcfResizeText() {
    var elements  = document.getElementsByClassName('jcfResize');
    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 + '%';
        }
    }
}

jcfResizeText();
window.addEventListener('resize', jcfResizeText); 

这篇关于Vanilla JS：调整font-awesome以适应容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！