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

Question

I need to find a way to change the size of some icons i have in a single image file and are being rendered by a script module inside Visual Composer addon from Wordpress.

Example html code:

<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>

Current 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;
}

If i change the height or width here all i get are repeated icons:

.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;
}

maybe there is a way to do it with Javascript or jquery instead of CSS?

Answer 1

I don't suggest you do this with a splice, as don't have the control you want without extensively writing code that uses numeric calculations to resize the div when the user resizes the page.

Instead, I would use one of the following ways:

First Way:

Use an img element instead:

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

Then it will always resize to it's parent div (currently 20px)

---

Second Way:

Use a background-image (like you already are, but not a splice), and add this:

background-size:100% 100%;

---

Now that you see how it's done with a single image, imagine how difficult it would be to do a splice. But if you did want to go this route, you will need to use the 2nd way, just change it to px coordinates instead of % and change them when the page resizes (w/ something like jQuery)