在div中输出字体真棒svg图标

Question

I need to display a font awesome icon inside a div. I've downloaded this icon from here https://fontawesome.com/icons/share-alt-square?style=solid , then I opened the downloaded svg file with a text editor, copied data of d attribute and placed into my markup.

Final markup should look like this:

<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>

I prefer such approach. Please correct me if I use it in a wrong way and it will not work. In that case what would be the most appropriate solution?

Answer 1

The problem is that the path you are using is from an svg with a much bigger viewBox . So in order to adapt it to what you have you will need to change the viewBox of your svg.

In order to know what viewBox to use, you may use the viewBox of the original icon. An other way is getting the size and position of the bounding box (javascript method: thePath.getBBox() ) of the path and use it to build the new value of the viewBox .

 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>