Html 如何设置svg图标大小的格式

Html 如何设置svg图标大小的格式,html,css,svg,icons,font-awesome,Html,Css,Svg,Icons,Font Awesome,我正在尝试理解SVG图标是如何工作的。我有一个很棒的字体图标,我想用SVG图标替换它。我研究了字体图标和svg自动调整分辨率和大小。但是当我放置svg图标时,图标变得非常大。请引导我 带有字体图标的图像: 现在我想用SVG图标替换它: 代码: 输出: 我希望图像像初始图像一样小。但它已经变得巨大。请引导我 您必须对SVG应用一个大小,否则它将继续扩展,直到到达其父容器的边缘 svg{ 高度:48px; 边缘:0.2米; 填充物:达克朗; } 您必须对SVG应用一个大小,否则它将继续扩展,直到

我正在尝试理解SVG图标是如何工作的。我有一个很棒的字体图标,我想用SVG图标替换它。我研究了字体图标和svg自动调整分辨率和大小。但是当我放置svg图标时,图标变得非常大。请引导我

带有字体图标的图像:

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

代码:

输出:


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

您必须对SVG应用一个大小,否则它将继续扩展,直到到达其父容器的边缘

svg{ 高度:48px; 边缘:0.2米; 填充物:达克朗; }
您必须对SVG应用一个大小,否则它将继续扩展,直到到达其父容器的边缘

svg{ 高度:48px; 边缘:0.2米; 填充物:达克朗; }
非常感谢你的回答。但从手机的角度来看,它将如何行动呢。它会自动调整吗。就像字体图标一样。我的意思是他们的手机会变小吗?请指导我。通过提供高度和边距,我们硬编码其值。所以,如果我在手机上看到它,它将如何挤压自己,并正确呈现,就像字体图标一样。请帮帮我。不知道你在说什么……字体大小也是硬编码的……有什么区别?如果需要,可以使用em值。当然,在实践中,您将使用类并在所需的媒体查询中进行调整。谢谢。这正是我需要的。我真的很感谢你抽出时间来帮助其他新手开发人员。非常感谢你的回答。但从手机的角度来看,它将如何行动呢。它会自动调整吗。就像字体图标一样。我的意思是他们的手机会变小吗?请指导我。通过提供高度和边距,我们硬编码其值。所以,如果我在手机上看到它,它将如何挤压自己,并正确呈现,就像字体图标一样。请帮帮我。不知道你在说什么……字体大小也是硬编码的……有什么区别?如果需要,可以使用em值。当然,在实践中,您将使用类并在所需的媒体查询中进行调整。谢谢。这正是我需要的。我真的很感激你抽出时间来帮助其他新手开发人员。
 <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>
<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>