css - 响应大小 Font Awesome 图标

标签 css twitter-bootstrap icons font-awesome

我在响应式 Bootstrap 网站中使用 FontAwesome 图标,并希望根据屏幕分辨率以不同大小显示图标。

理想情况下,我想使用容器宽度的百分比(即宽度的 50%)来显示超赞字体图标,以便它们按比例放大和缩小。我知道我可能只使用 svg 图标就可以做到这一点,但我想使用 FontAwesome,因为我在我网站的其他地方使用它。

我知道您可以使用类指定大小,即 fa-lg 或 fa-2x。最好的解决方案是使用 Bootstrap 类来根据屏幕分辨率隐藏和显示各种尺寸,还是可以让图标使用百分比自动缩放?

最佳答案

你必须看到这个答案:

Font scaling based on width of container

在字体大小上使用“vw”单位。还要检查那里提到的浏览器支持表 - 它非常好。

干杯!

关于css - 响应大小 Font Awesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29299574/

相关文章:

c++ - 如何绘制 HICON?

html - 截断隐藏单选按钮

html - 为什么上边框和左边框不被视为单线?

css - 如何移动交叉图像

html - Bootstrap - 背景颜色为流体的非流体容器和行

android - 如何从图标包加载图标

javascript - 滚动后动画标题导航缩小

javascript - 滚动时添加文本阴影(jquery 或 javascript)

css - Font Awesome 显示为正方形

icons - 为 cmake-cpack 应用程序指定图标和菜单条目