📘

SF SymbolsをKeynotes/Pagesに活用しよう

2022/05/30に公開

まずはSF Symbolsをダウンロードします
https://developer.apple.com/sf-symbols/

そして、SF Symbolsを起動
アイコンを右クリック、メニューの一番目の選択肢をセレクト
(該当アイコンのUnicodeをコピーします)

次はPagesを起動
先ほどコピーしたアイコンをペースト

WebでSF Symbolsを表示

WebでSF Symbolsを表示できるのが
MacやiPhoneなど、アップル社製品のみです
WindowsやAndroidではSF Symbolsはアイコンとして表示させるのができないです

同じくまずSF SymbolsアプリからアイコンのUnicodeをコピー
CSSでフォントを「SF Pro」を指定
「SF Pro」は予めMacやiPhoneにインストール済みのフォントなので
font-faceなどの設定はせず、そのままCSSを書けばOKです

<h1>􀫖</h1>
h1 {
	font-family: 'SF Pro';
}

そしたらWebでもSF Symbolを表示できます

Discussion