HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Sprite — Multiple Icons</title>
  <style>
    .sprite {
      --size: 44px;
      --scale: calc(var(--size) * 6 / 1774);
      width: var(--size);
      height: var(--size);
      background-image: url("/images/browser-image-sprite.png");
      background-repeat: no-repeat;
      background-size: calc(var(--size) * 6) calc(var(--size) * 6 * 887 / 1774);
      display: inline-block;
    }

    .sprite-chrome {
      background-position:
        calc(var(--size) / 2 - 172 * var(--scale))
        calc(var(--size) / 2 - 432 * var(--scale));
    }

    .sprite-firefox {
      background-position:
        calc(var(--size) / 2 - 462 * var(--scale))
        calc(var(--size) / 2 - 445 * var(--scale));
    }

    .sprite-safari {
      background-position:
        calc(var(--size) / 2 - 748 * var(--scale))
        calc(var(--size) / 2 - 438 * var(--scale));
    }

    .row {
      display: flex;
      gap: 1rem;
      align-items: center;
      margin-top: 1rem;
    }

    .label {
      font-size: 0.8125rem;
      color: #64748b;
    }
  </style>
</head>
<body style="margin:0;padding:1.5rem;font-family:system-ui,sans-serif;">
  <h1 style="font-size:1.125rem;color:#1e293b;">Three icons, one sprite file</h1>
  <div class="row">
    <div><span class="sprite sprite-chrome" aria-hidden="true"></span><div class="label">Chrome</div></div>
    <div><span class="sprite sprite-firefox" aria-hidden="true"></span><div class="label">Firefox</div></div>
    <div><span class="sprite sprite-safari" aria-hidden="true"></span><div class="label">Safari</div></div>
  </div>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS Image Sprites — Multiple Icons