如何调整 SVG 社交图标的宽度和高度？

Posted 2023-02-22

【中文标题】如何调整 SVG 社交图标的宽度和高度？

【英文标题】：How to resize the width and height of SVG social icons?

【发布时间】：2016-09-21 06:21:44

【问题描述】：

我想调整本网站顶部标题上的社交图标http://petlet.net.au/

我认为徽标是图像，但我认为这些徽标来自库或外部，因为当您检查代码时，没有 <img src> 代码。

这是代码：

如何调整社交图标的大小？

【参考方案1】：

使用 font-size css 属性，您可以调整 font-awesome 字体的大小。

试试这个：

.top-header-content  a
   font-size:20px;

【参考方案2】：

每当图标用作svg 图标时，您只需更改font-size 即可调整它们的大小。它们可以是彩色的，不是彩色的，多种形状、大小等等。

.header .fa 
    font-size: 15px;  // you can increase or decrease font size as per your needs.


.header .fa-facebook-square 
    font-size: 18px; // you can change font-sizes of different icons indiviually

【参考方案3】：

使用 fa-2x、fa-3x、fa-4x 或 fa-5x 类。

<i class="fa fa-facebook-square fa-lg"></i> //smallest
<i class="fa fa-facebook-square fa-2x"></i> 
<i class="fa fa-facebook-square fa-3x"></i> 
<i class="fa fa-facebook-square fa-4x"></i> 
<i class="fa fa-facebook-square fa-5x"></i> //biggest

【参考方案4】：

对于较新的版本，请使用 icon-2x、icon-3x 等。

<i class="icon-camera-retro icon-4x"></i>

参考http://fontawesome.io/3.2.1/examples/