Output font awesome svg icon 里面 div
Output font awesome svg icon inside div
我需要在 div 中显示一个很棒的字体图标。
我从这里下载了这个图标 https://fontawesome.com/icons/share-alt-square?style=solid
,然后我用文本编辑器打开下载的 svg 文件,复制 d
属性的数据并放入我的标记中。
最终标记应如下所示:
<div style="width: 32px; height: 32px;">
<svg viewBox="0 0 64 64" width="32" height="32">
<g>
<rect width="64" height="64" fill=""></rect>
</g>
<g>
<path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zM304 296c-14.562 0-27.823 5.561-37.783 14.671l-67.958-40.775a56.339 56.339 0 0 0 0-27.793l67.958-40.775C276.177 210.439 289.438 216 304 216c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56c0 4.797.605 9.453 1.74 13.897l-67.958 40.775C171.823 205.561 158.562 200 144 200c-30.928 0-56 25.072-56 56s25.072 56 56 56c14.562 0 27.823-5.561 37.783-14.671l67.958 40.775a56.088 56.088 0 0 0-1.74 13.897c0 30.928 25.072 56 56 56s56-25.072 56-56C360 321.072 334.928 296 304 296z" fill="white"></path>
</g>
</svg>
</div>
我更喜欢这种方法。如果我以错误的方式使用它并且它不起作用,请纠正我。
在那种情况下,什么是最合适的解决方案?
问题是您使用的路径来自一个更大 viewBox
的 svg。因此,为了使其适应您所拥有的,您需要更改 svg 的 viewBox
。
要知道viewBox
有什么用,可以用原图标的viewBox
。另一种方法是获取路径的边界框(javascript 方法:thePath.getBBox()
)的大小和位置,并使用它来构建 viewBox
.[=18= 的新值]
svg{border:1px solid}
<div style="width: 32px; height: 32px;">
<svg viewBox="0 32 448 448">
<g>
<rect y="32" width="448" height="448" fill=""></rect>
</g>
<g>
<path id="thePath" d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zM304 296c-14.562 0-27.823 5.561-37.783 14.671l-67.958-40.775a56.339 56.339 0 0 0 0-27.793l67.958-40.775C276.177 210.439 289.438 216 304 216c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56c0 4.797.605 9.453 1.74 13.897l-67.958 40.775C171.823 205.561 158.562 200 144 200c-30.928 0-56 25.072-56 56s25.072 56 56 56c14.562 0 27.823-5.561 37.783-14.671l67.958 40.775a56.088 56.088 0 0 0-1.74 13.897c0 30.928 25.072 56 56 56s56-25.072 56-56C360 321.072 334.928 296 304 296z" fill="white"></path>
</g>
</svg>
</div>
我需要在 div 中显示一个很棒的字体图标。
我从这里下载了这个图标 https://fontawesome.com/icons/share-alt-square?style=solid
,然后我用文本编辑器打开下载的 svg 文件,复制 d
属性的数据并放入我的标记中。
最终标记应如下所示:
<div style="width: 32px; height: 32px;">
<svg viewBox="0 0 64 64" width="32" height="32">
<g>
<rect width="64" height="64" fill=""></rect>
</g>
<g>
<path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zM304 296c-14.562 0-27.823 5.561-37.783 14.671l-67.958-40.775a56.339 56.339 0 0 0 0-27.793l67.958-40.775C276.177 210.439 289.438 216 304 216c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56c0 4.797.605 9.453 1.74 13.897l-67.958 40.775C171.823 205.561 158.562 200 144 200c-30.928 0-56 25.072-56 56s25.072 56 56 56c14.562 0 27.823-5.561 37.783-14.671l67.958 40.775a56.088 56.088 0 0 0-1.74 13.897c0 30.928 25.072 56 56 56s56-25.072 56-56C360 321.072 334.928 296 304 296z" fill="white"></path>
</g>
</svg>
</div>
我更喜欢这种方法。如果我以错误的方式使用它并且它不起作用,请纠正我。 在那种情况下,什么是最合适的解决方案?
问题是您使用的路径来自一个更大 viewBox
的 svg。因此,为了使其适应您所拥有的,您需要更改 svg 的 viewBox
。
要知道viewBox
有什么用,可以用原图标的viewBox
。另一种方法是获取路径的边界框(javascript 方法:thePath.getBBox()
)的大小和位置,并使用它来构建 viewBox
.[=18= 的新值]
svg{border:1px solid}
<div style="width: 32px; height: 32px;">
<svg viewBox="0 32 448 448">
<g>
<rect y="32" width="448" height="448" fill=""></rect>
</g>
<g>
<path id="thePath" d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zM304 296c-14.562 0-27.823 5.561-37.783 14.671l-67.958-40.775a56.339 56.339 0 0 0 0-27.793l67.958-40.775C276.177 210.439 289.438 216 304 216c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56c0 4.797.605 9.453 1.74 13.897l-67.958 40.775C171.823 205.561 158.562 200 144 200c-30.928 0-56 25.072-56 56s25.072 56 56 56c14.562 0 27.823-5.561 37.783-14.671l67.958 40.775a56.088 56.088 0 0 0-1.74 13.897c0 30.928 25.072 56 56 56s56-25.072 56-56C360 321.072 334.928 296 304 296z" fill="white"></path>
</g>
</svg>
</div>