I am trying to make a website and was hoping to use Apple's SF Symbols for some icons, however I can not find a way to get SF Icons onto a website, I downloaded the app and copied the icon however on the website it shows a blank square.
Any help would be appreciated.
Unfortunately, this application is not permitted by the license that accompanies the SF Symbols download.
Your use of Symbols obtained from Apple’s SF Font is limited to creating mock-ups of user interfaces for software products running on Apple’s iOS, iPadOS, macOS and tvOS operating systems.
I copied symbols (UTF8 I guess) from SFSymbols3 mac app into TextEdit and saved it as html. Resulting page works in Chrome (94.04) on macOS, but surprisingly not in Safari (15.0).
I made a js fiddle: https://jsfiddle.net/4so0wzdk/#&togetherjs=Tv12LecGJT
Below a snipped where you have to paste symbol instead XXX and YYY.
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px 'SF Pro'}
</style>
</head>
<body>
<p class="p1">XXX 0.circle</p>
<p class="p1">YYY 00.circle</p>
</body>
</html>
SFSymbols3.app from Apple must be installed. Otherwise it won't work.
You are not able to use this icons on the websites as license of SF symbols do not allow use those symbols externally than apple's products.
https://fonts.google.com/icons
https://www.w3schools.com/icons/icons_reference.asp
But there exist ways to do this (illegall ofc)
you can try to manually add one of "San Francisco Fonts" to your website and use SFSymbols from those font.
you can copy image and paste it to any image editor and save as png.
after this you can use it as an image on the website.