如何格式化 svg 图标大小

Question

我想了解 SVG 图标 works.I 为何有一个 "font awesome" 图标，我想用 SVG 图标替换它。我研究了 font awesome icon 和 svg 自动调整它们的分辨率和大小。但是当我放置 svg 图标时，图标变得非常大。请指导我。

带有超棒图标的图像：

 <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
     <div class="tile-stats">
         <div class="icon"><i class="fa fa-sort-amount-desc"></i>
         </div>
     <div id = "topbar3" class="count"></div>
     <h3>Occupancy Sq Ft</h3>
</div>

现在我想用 SVG 图标替换它：

代码：

<div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="tile-stats">
    // SVG File
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
    <path d="M912,865V188H765v-47.9c3,1.5,7.7,1.5,12.3,1.5c15.5,0,29.4-4.6,38.7-13.9c6.2-6.2,9.3-15.5,9.3-26.3
      c0-10.8-4.7-20.1-10.9-26.3c-7.7-7.7-20.1-10.7-35.6-10.7c-13.9,0-23.2-0.3-31,1.7h1.2v122H636v677H436V416h-83.5l-43.1-125h-20.1
      l-41.6,125H171v449H3v161h1017V865H912z M293.9,329.4c1.5-7.7,4.6-15.5,6.2-23.2c1.5,7.7,3.1,15.4,6.2,23.2l10.8,35.6h-35.6
      L293.9,329.4z M264.7,416l12.2-38h43.4l13.7,38H264.7z M763,78.1c3-1.5,7.9-1.5,15.6-1.5c17,0,29.5,7.7,29.5,24.8
      c0,17-11,26.3-31.1,26.3c-6.2,0-11.1,0-14.1-1.5V78.1z"/>
    </svg>
    <div id = "topbar3" class="count"></div>
    <h3>Occupancy Sq Ft</h3>
     </div>
     </div>

输出：

我希望图像像图像初始图像一样小。但它已经变得巨大了。请指导我。

Answer 1

您必须为 SVG 应用一个大小，否则它会一直扩展直到到达其父容器的边缘。

svg {
  height: 48px;
  margin: 0 2em;
  fill: darkorange;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
  <path d="M912,865V188H765v-47.9c3,1.5,7.7,1.5,12.3,1.5c15.5,0,29.4-4.6,38.7-13.9c6.2-6.2,9.3-15.5,9.3-26.3
      c0-10.8-4.7-20.1-10.9-26.3c-7.7-7.7-20.1-10.7-35.6-10.7c-13.9,0-23.2-0.3-31,1.7h1.2v122H636v677H436V416h-83.5l-43.1-125h-20.1
      l-41.6,125H171v449H3v161h1017V865H912z M293.9,329.4c1.5-7.7,4.6-15.5,6.2-23.2c1.5,7.7,3.1,15.4,6.2,23.2l10.8,35.6h-35.6
      L293.9,329.4z M264.7,416l12.2-38h43.4l13.7,38H264.7z M763,78.1c3-1.5,7.9-1.5,15.6-1.5c17,0,29.5,7.7,29.5,24.8
      c0,17-11,26.3-31.1,26.3c-6.2,0-11.1,0-14.1-1.5V78.1z" />
</svg>

如何格式化 svg 图标大小

How to format svg icons size

html

css

icons

svg

font-awesome