从导入的图标列表图像更改渲染的图标大小

Change rendered icon size from imported icon list image

本文关键字：图标 图像 导入 列表      更新时间：2023-09-26

我需要找到一种方法来更改我在单个图像文件中的一些图标的大小，这些图标由Wordpress的Visual Composer插件中的脚本模块渲染。

示例html代码：

<ul class="ts-social-icons simple">
<li style="margin: 5px;  padding: 0px;" class="ts-social-icon  center">
    <a href="mailto:BLABLA@gmail.com" class="ts-social-email " target="_blank" style="">
        <i style="top: 9px;" class="ts-social-email"></i>
    </a>
</li>
<li style="margin: 5px;  padding: 0px;" class="ts-social-icon  center">
    <a onclick="return false" "="" href="#" class="ts-social-phone " target="_blank" style="">
        <i "="" 9px;="" top:="" class="ts-social-phone style="></i>
    </a>
</li>
<li style="margin: 5px;  padding: 0px;" class="ts-social-icon  center">
    <a onclick="return false" "="" href="#" class="ts-social-cell " target="_blank" style="">
        <i "="" top:="" class="ts-social-cell style="></i>
    </a>
</li>
<li style="margin: 5px;  padding: 0px;" class="ts-social-icon  center">
    <a href="http://www.asd.com/" class="ts-social-portfolio " target="_blank" style="">
        <i style="top: 9px; " class="ts-social-portfolio"></i>
    </a>
</li>
<li style="margin: 5px;  padding: 0px;" class="ts-social-icon  center">
    <a href="http://www.asd.com/" class="ts-social-link " target="_blank" style="">
        <i style="top: 9px; " class="ts-social-link"></i>
    </a>
</li>
<li style="margin: 5px;  padding: 0px;" class="ts-social-icon  center">
    <a href="http://https://www.facebook.com/asd" class="ts-social-facebook " target="_blank" style="">
        <i style="top: 9px; " class="ts-social-facebook"></i>
    </a>
</li>

当前CSS

.ts-social-icons li a i {
  background: url("images/team-socials-black.png") no-repeat scroll center center rgba(0, 0, 0, 0) !important;
}

如果我在这里更改高度或宽度，我得到的都是重复的图标：

.ts-logo-icons li a i, .ts-social-icons li a i, .ts-teammate-icons li a i {
  display: inline-block;
  height: 20px;
  margin: 10px auto;
  text-align: center;
  text-decoration: none;
  width: 20px;
  z-index: 999;
}

也许有一种方法可以用Javascript或jquery来代替CSS？

我不建议您使用拼接来实现这一点，因为如果不大量编写代码，在用户调整页面大小时使用数值计算来调整div的大小，就无法获得所需的控件。

相反，我会使用以下方式之一：

第一种方式：

改为使用img元素：

<img width="100%" height="100%"/>

然后它将始终调整大小为其父div（当前为20px）

第二种方式：

使用background-image（就像你已经使用过的一样，但不是拼接），并添加以下内容：

background-size:100% 100%;

既然你已经看到了如何用一张图像完成拼接，想象一下拼接有多难。但是，如果你确实想走这条路，你需要使用第二种方法，只需将其更改为px坐标而不是%，并在页面调整大小时更改它们（类似jQuery）

相关文章：