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.
On
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.
Legal alternative is to use symbols from here:
https://fonts.google.com/icons
https://www.w3schools.com/icons/icons_reference.asp
upd:
https://fontawesome.com/search?m=free&o=r
(most of them are not free, but, link goes to 2,018 free icons)
and by the way you can use it directly from swift using
https://github.com/LiveUI/Awesome
or
https://github.com/thii/FontAwesome.swift
But there exist ways to do this (ILLEGAL ofc)
way 1
you can try to manually add one of "San Francisco Fonts" to your website and use SFSymbols from those font.
way 2
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. ILLEGALLY.