htmlsvgiconsbootstrap-5font-awesome-5

Replace fontawesome icons with SVG icons

I want to replace the Fontawesome icons from this template. Full HTML is here but I just want to replace this icon with an SVG.

Icon to replace

            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fas fa-circle fa-stack-2x text-primary"></i>
                    <i class="fas fa-shopping-cart fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">E-Commerce</h4>
                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
            </div>

I tried to replace it with the simple SVG representing number 5 sourced here. I don't understand what fa-stack and other Fontawesome code does, so I am struggling to replace it.

Any idea on how to replace the Fontawesome logo for a SVG?

                <div class="col-md-4">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="96" height="96" class="text-primary">
                        <g clip-path="url(#clip0_429_10989)">
                            <circle cx="12" cy="12" r="9" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M9.5 16.2361C10.0308 16.7111 10.7316 17 11.5 17C13.1569 17 14.5 15.6569 14.5 14C14.5 12.3431 13.1569 11 11.5 11C10.7316 11 10.0308 11.2889 9.5 11.7639L10.5 7H14.5" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_429_10989">
                            <rect width="24" height="24" fill="white"/>
                            </clipPath>
                            </defs>
                    </svg>
Solution

  • FontAwesome "fa-classes"

    Most fa- prefixed classes are used for selecting different icons e.g fa-shopping-cart add shopping-cart icon.
    Some of them are used for resizing/scaling the icon e.g fa-stack-2x

    Icon's viewBox must match the icon's bounding box

    In your example you've copied the fontAwesome viewBox 512x512.

    But your new icon has an intrinsic size of ~ 21x21 SVG user units.
    So by increasing the viewBox you add additional whitespace around your icon.
    See also Css-tricks: "6 Common SVG Fails (and How to Fix Them)"

    You can get a tight/minimum viewBox via getBBox()

    let bb = svg.getBBox();
let {x,y, width, height} = bb;
console.log('tight viewBox- we need to add stroke-width!',x,y, width, height);
    svg {
  border: 1px solid #ccc;
}

.text-primary{
color: orange
}
    <h3>Wrong viewBox</h3>
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="96" height="96" class="text-primary">
                        <g clip-path="url(#clip0_429_10989)">
                            <circle cx="12" cy="12" r="9" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M9.5 16.2361C10.0308 16.7111 10.7316 17 11.5 17C13.1569 17 14.5 15.6569 14.5 14C14.5 12.3431 13.1569 11 11.5 11C10.7316 11 10.0308 11.2889 9.5 11.7639L10.5 7H14.5" stroke="#292929" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </g>
                            <defs>
                            <clipPath id="clip0_429_10989">
                            <rect width="24" height="24" fill="white"/>
                            </clipPath>
                            </defs>
                    </svg>
                    
<h3>Optimized svg</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="1.75 1.75 20.5 20.5" width="96" height="96" class="text-primary">
<circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
<path d="M9.5 16.2361C10.0308 16.7111 10.7316 17 11.5 17C13.1569 17 14.5 15.6569 14.5 14C14.5 12.3431 13.1569 11 11.5 11C10.7316 11 10.0308 11.2889 9.5 11.7639L10.5 7H14.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none" stroke-linejoin="round"/>
</svg>

    Besides, you need to replace replace specific stroke colors with currentColor value – this way the icon can inherit the parent's text color for strokes and fills.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/StartBootstrap/startbootstrap-agency@master/dist/css/styles.css">
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>

<section class="page-section" id="services">
  <div class="container">
    <div class="text-center">
      <h2 class="section-heading text-uppercase">Services</h2>
      <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
    </div>
    <div class="row text-center">
      <div class="col-md-4">
        <span class="fa-stack fa-4x">
          <svg  class="svg-inline--fa fa-stack-2x text-primary" viewBox="1.75 1.75 20.5 20.5" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M9.5 16.2361C10.0308 16.7111 10.7316 17 11.5 17C13.1569 17 14.5 15.6569 14.5 14C14.5 12.3431 13.1569 11 11.5 11C10.7316 11 10.0308 11.2889 9.5 11.7639L10.5 7H14.5" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </span>
        <h4 class="my-3">E-Commerce</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
      </div>

      <div class="col-md-4">
        <span class="fa-stack fa-4x">
          <i class="fas fa-circle fa-stack-2x text-primary"></i>
          <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
        </span>
        <h4 class="my-3">Web Security</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
      </div>
    </div>
  </div>
</section>