Firefox OS には独自のアイコンフォントセットが搭載されています。この記事ではそれを自作アプリ内で使う方法を説明します。
注
Firefox OS アイコンフォントは Github の Gaia アイコンストア からダウンロードするか、以下のように bower を使ってインストールできます。
$ bower install gaia-components/gaia-icons
gaia-icons.css ファイルへのリンクを張ったら、以下の参照例に含まれているアイコンの名前を data-icon 属性として使うことができます。例えば、
<div role="toolbar"> <button data-icon="messages">messages</button> <button data-icon="email">email</button> <button data-icon="call">call</button> </div>
実際の参照例
ここでは、表示されるアイコンがどのようなものか、それぞれに必要な data-icon 属性名とともに示します。
コード
以下が上記サンプルのコードです。
<!doctype html>
<html>
<head>
<link href="https://gaia-components.github.io/gaia-icons/gaia-icons-embedded.css" rel="stylesheet" type="text/css">
<link href="https://mozilla.github.io/Fira/fira.css" rel="stylesheet" type="text/css">
<style>
html, body {
font-family: sans-serif;
margin: 0;
padding: 0;
font-size: 10px;
background-color: #fff;
}
section a {
font-size: 12px;
line-height: 30px;
margin-bottom: 10px;
position: relative;
float: left;
width: 175px;
height: 30px;
text-decoration: none;
color: #333;
margin: 0;
padding-bottom: 20px;
}
section a:after {
content: attr(data-icon);
position: relative;
left: 10px;
bottom: 8px;
}
</style>
</head>
<body>
<section>
<a href="#2g" id="2g" data-icon="2g"></a>
<a href="#3g" id="3g" data-icon="3g"></a>
<a href="#4g" id="4g" data-icon="4g"></a>
<a href="#accessibility" id="accessibility" data-icon="accessibility"></a>
<a href="#add-contact" id="add-contact" data-icon="add-contact"></a>
<a href="#add" id="add" data-icon="add"></a>
<a href="#airplane" id="airplane" data-icon="airplane"></a>
<a href="#alarm-clock" id="alarm-clock" data-icon="alarm-clock"></a>
<a href="#alarm-stop" id="alarm-stop" data-icon="alarm-stop"></a>
<a href="#alarm" id="alarm" data-icon="alarm"></a>
<a href="#album" id="album" data-icon="album"></a>
<a href="#all-day" id="all-day" data-icon="all-day"></a>
<a href="#arrow-back" id="arrow-back" data-icon="arrow-back"></a>
<a href="#arrow-forward" id="arrow-forward" data-icon="arrow-forward"></a>
<a href="#artist" id="artist" data-icon="artist"></a>
<a href="#attachment" id="attachment" data-icon="attachment"></a>
<a href="#back-light" id="back-light" data-icon="back-light"></a>
<a href="#back" id="back" data-icon="back"></a>
<a href="#battery-0" id="battery-0" data-icon="battery-0"></a>
<a href="#battery-1" id="battery-1" data-icon="battery-1"></a>
<a href="#battery-10" id="battery-10" data-icon="battery-10"></a>
<a href="#battery-2" id="battery-2" data-icon="battery-2"></a>
<a href="#battery-3" id="battery-3" data-icon="battery-3"></a>
<a href="#battery-4" id="battery-4" data-icon="battery-4"></a>
<a href="#battery-5" id="battery-5" data-icon="battery-5"></a>
<a href="#battery-6" id="battery-6" data-icon="battery-6"></a>
<a href="#battery-7" id="battery-7" data-icon="battery-7"></a>
<a href="#battery-8" id="battery-8" data-icon="battery-8"></a>
<a href="#battery-9" id="battery-9" data-icon="battery-9"></a>
<a href="#battery-charging" id="battery-charging" data-icon="battery-charging"></a>
<a href="#battery-unknown" id="battery-unknown" data-icon="battery-unknown"></a>
<a href="#bluetooth-a2dp" id="bluetooth-a2dp" data-icon="bluetooth-a2dp"></a>
<a href="#bluetooth-circle" id="bluetooth-circle" data-icon="bluetooth-circle"></a>
<a href="#bluetooth-transfer-circle" id="bluetooth-transfer-circle" data-icon="bluetooth-transfer-circle"></a>
<a href="#bluetooth-transfer" id="bluetooth-transfer" data-icon="bluetooth-transfer"></a>
<a href="#bluetooth" id="bluetooth" data-icon="bluetooth"></a>
<a href="#brightness" id="brightness" data-icon="brightness"></a>
<a href="#browsing" id="browsing" data-icon="browsing"></a>
<a href="#bug" id="bug" data-icon="bug"></a>
<a href="#calendar" id="calendar" data-icon="calendar"></a>
<a href="#call-bluetooth" id="call-bluetooth" data-icon="call-bluetooth"></a>
<a href="#call-emergency" id="call-emergency" data-icon="call-emergency"></a>
<a href="#call-forwarding" id="call-forwarding" data-icon="call-forwarding"></a>
<a href="#call-hang-up" id="call-hang-up" data-icon="call-hang-up"></a>
<a href="#call-hold" id="call-hold" data-icon="call-hold"></a>
<a href="#call-incoming" id="call-incoming" data-icon="call-incoming"></a>
<a href="#call-merge" id="call-merge" data-icon="call-merge"></a>
<a href="#call-missed" id="call-missed" data-icon="call-missed"></a>
<a href="#call-outgoing" id="call-outgoing" data-icon="call-outgoing"></a>
<a href="#call-reversed" id="call-reversed" data-icon="call-reversed"></a>
<a href="#call-ringing" id="call-ringing" data-icon="call-ringing"></a>
<a href="#call" id="call" data-icon="call"></a>
<a href="#callback-emergency" id="callback-emergency" data-icon="callback-emergency"></a>
<a href="#camera" id="camera" data-icon="camera"></a>
<a href="#change-wallpaper" id="change-wallpaper" data-icon="change-wallpaper"></a>
<a href="#clear-input" id="clear-input" data-icon="clear-input"></a>
<a href="#close" id="close" data-icon="close"></a>
<a href="#compose" id="compose" data-icon="compose"></a>
<a href="#contact-find" id="contact-find" data-icon="contact-find"></a>
<a href="#contacts" id="contacts" data-icon="contacts"></a>
<a href="#crashed" id="crashed" data-icon="crashed"></a>
<a href="#crop" id="crop" data-icon="crop"></a>
<a href="#data" id="data" data-icon="data"></a>
<a href="#delete" id="delete" data-icon="delete"></a>
<a href="#developer" id="developer" data-icon="developer"></a>
<a href="#device-info" id="device-info" data-icon="device-info"></a>
<a href="#dialpad" id="dialpad" data-icon="dialpad"></a>
<a href="#dismiss-keyboard" id="dismiss-keyboard" data-icon="dismiss-keyboard"></a>
<a href="#do-not-track" id="do-not-track" data-icon="do-not-track"></a>
<a href="#download-circle" id="download-circle" data-icon="download-circle"></a>
<a href="#download" id="download" data-icon="download"></a>
<a href="#edge" id="edge" data-icon="edge"></a>
<a href="#edit-contact" id="edit-contact" data-icon="edit-contact"></a>
<a href="#edit-image" id="edit-image" data-icon="edit-image"></a>
<a href="#edit" id="edit" data-icon="edit"></a>
<a href="#email-forward" id="email-forward" data-icon="email-forward"></a>
<a href="#email-mark-read" id="email-mark-read" data-icon="email-mark-read"></a>
<a href="#email-mark-unread" id="email-mark-unread" data-icon="email-mark-unread"></a>
<a href="#email-move" id="email-move" data-icon="email-move"></a>
<a href="#email-reply" id="email-reply" data-icon="email-reply"></a>
<a href="#email" id="email" data-icon="email"></a>
<a href="#exclamation" id="exclamation" data-icon="exclamation"></a>
<a href="#expand" id="expand" data-icon="expand"></a>
<a href="#facebook" id="facebook" data-icon="facebook"></a>
<a href="#feedback" id="feedback" data-icon="feedback"></a>
<a href="#find" id="find" data-icon="find"></a>
<a href="#firefox" id="firefox" data-icon="firefox"></a>
<a href="#flag" id="flag" data-icon="flag"></a>
<a href="#flash-auto" id="flash-auto" data-icon="flash-auto"></a>
<a href="#flash-off" id="flash-off" data-icon="flash-off"></a>
<a href="#flash-on" id="flash-on" data-icon="flash-on"></a>
<a href="#focus-locked" id="focus-locked" data-icon="focus-locked"></a>
<a href="#focus-locking" id="focus-locking" data-icon="focus-locking"></a>
<a href="#forward-light" id="forward-light" data-icon="forward-light"></a>
<a href="#forward" id="forward" data-icon="forward"></a>
<a href="#gesture" id="gesture" data-icon="gesture"></a>
<a href="#gmail" id="gmail" data-icon="gmail"></a>
<a href="#grid-circular" id="grid-circular" data-icon="grid-circular"></a>
<a href="#grid" id="grid" data-icon="grid"></a>
<a href="#gsm" id="gsm" data-icon="gsm"></a>
<a href="#hdr-boxed" id="hdr-boxed" data-icon="hdr-boxed"></a>
<a href="#hdr" id="hdr" data-icon="hdr"></a>
<a href="#headphones" id="headphones" data-icon="headphones"></a>
<a href="#help" id="help" data-icon="help"></a>
<a href="#homescreen" id="homescreen" data-icon="homescreen"></a>
<a href="#hspa-plus" id="hspa-plus" data-icon="hspa-plus"></a>
<a href="#hspa" id="hspa" data-icon="hspa"></a>
<a href="#import-memorycard-circle" id="import-memorycard-circle" data-icon="import-memorycard-circle"></a>
<a href="#incoming-sms" id="incoming-sms" data-icon="incoming-sms"></a>
<a href="#info" id="info" data-icon="info"></a>
<a href="#keyboard-circle" id="keyboard-circle" data-icon="keyboard-circle"></a>
<a href="#keyboard" id="keyboard" data-icon="keyboard"></a>
<a href="#languages" id="languages" data-icon="languages"></a>
<a href="#link" id="link" data-icon="link"></a>
<a href="#location" id="location" data-icon="location"></a>
<a href="#lock" id="lock" data-icon="lock"></a>
<a href="#media-storage" id="media-storage" data-icon="media-storage"></a>
<a href="#menu" id="menu" data-icon="menu"></a>
<a href="#messages" id="messages" data-icon="messages"></a>
<a href="#mic" id="mic" data-icon="mic"></a>
<a href="#minus" id="minus" data-icon="minus"></a>
<a href="#moon" id="moon" data-icon="moon"></a>
<a href="#more" id="more" data-icon="more"></a>
<a href="#mute" id="mute" data-icon="mute"></a>
<a href="#nfc" id="nfc" data-icon="nfc"></a>
<a href="#no-sim" id="no-sim" data-icon="no-sim"></a>
<a href="#notifications" id="notifications" data-icon="notifications"></a>
<a href="#o" id="o" data-icon="o"></a>
<a href="#outgoing-sms" id="outgoing-sms" data-icon="outgoing-sms"></a>
<a href="#outlook" id="outlook" data-icon="outlook"></a>
<a href="#pause" id="pause" data-icon="pause"></a>
<a href="#picture-size" id="picture-size" data-icon="picture-size"></a>
<a href="#play-circle" id="play-circle" data-icon="play-circle"></a>
<a href="#play" id="play" data-icon="play"></a>
<a href="#playlist" id="playlist" data-icon="playlist"></a>
<a href="#privacy" id="privacy" data-icon="privacy"></a>
<a href="#recent-calls" id="recent-calls" data-icon="recent-calls"></a>
<a href="#reload" id="reload" data-icon="reload"></a>
<a href="#repeat-once" id="repeat-once" data-icon="repeat-once"></a>
<a href="#repeat" id="repeat" data-icon="repeat"></a>
<a href="#reply-all" id="reply-all" data-icon="reply-all"></a>
<a href="#rocket" id="rocket" data-icon="rocket"></a>
<a href="#rotate" id="rotate" data-icon="rotate"></a>
<a href="#scene" id="scene" data-icon="scene"></a>
<a href="#sd-card" id="sd-card" data-icon="sd-card"></a>
<a href="#search" id="search" data-icon="search"></a>
<a href="#seek-back" id="seek-back" data-icon="seek-back"></a>
<a href="#seek-forward" id="seek-forward" data-icon="seek-forward"></a>
<a href="#select" id="select" data-icon="select"></a>
<a href="#self-timer" id="self-timer" data-icon="self-timer"></a>
<a href="#send" id="send" data-icon="send"></a>
<a href="#settings" id="settings" data-icon="settings"></a>
<a href="#share" id="share" data-icon="share"></a>
<a href="#shuffle" id="shuffle" data-icon="shuffle"></a>
<a href="#signal-0" id="signal-0" data-icon="signal-0"></a>
<a href="#signal-1" id="signal-1" data-icon="signal-1"></a>
<a href="#signal-2" id="signal-2" data-icon="signal-2"></a>
<a href="#signal-3" id="signal-3" data-icon="signal-3"></a>
<a href="#signal-4" id="signal-4" data-icon="signal-4"></a>
<a href="#signal-5" id="signal-5" data-icon="signal-5"></a>
<a href="#signal-roaming" id="signal-roaming" data-icon="signal-roaming"></a>
<a href="#sim-toolkit" id="sim-toolkit" data-icon="sim-toolkit"></a>
<a href="#sim" id="sim" data-icon="sim"></a>
<a href="#skip-back" id="skip-back" data-icon="skip-back"></a>
<a href="#skip-forward" id="skip-forward" data-icon="skip-forward"></a>
<a href="#songs" id="songs" data-icon="songs"></a>
<a href="#sound-max" id="sound-max" data-icon="sound-max"></a>
<a href="#sound-min" id="sound-min" data-icon="sound-min"></a>
<a href="#star-empty" id="star-empty" data-icon="star-empty"></a>
<a href="#star-full" id="star-full" data-icon="star-full"></a>
<a href="#stop" id="stop" data-icon="stop"></a>
<a href="#storage-circle" id="storage-circle" data-icon="storage-circle"></a>
<a href="#storage" id="storage" data-icon="storage"></a>
<a href="#switch" id="switch" data-icon="switch"></a>
<a href="#sync" id="sync" data-icon="sync"></a>
<a href="#tethering" id="tethering" data-icon="tethering"></a>
<a href="#themes" id="themes" data-icon="themes"></a>
<a href="#tick-circle" id="tick-circle" data-icon="tick-circle"></a>
<a href="#tick" id="tick" data-icon="tick"></a>
<a href="#time" id="time" data-icon="time"></a>
<a href="#toggle-camera-front" id="toggle-camera-front" data-icon="toggle-camera-front"></a>
<a href="#toggle-camera-rear" id="toggle-camera-rear" data-icon="toggle-camera-rear"></a>
<a href="#topup-with-code" id="topup-with-code" data-icon="topup-with-code"></a>
<a href="#topup" id="topup" data-icon="topup"></a>
<a href="#twitter" id="twitter" data-icon="twitter"></a>
<a href="#undo-circular" id="undo-circular" data-icon="undo-circular"></a>
<a href="#undo" id="undo" data-icon="undo"></a>
<a href="#unlock" id="unlock" data-icon="unlock"></a>
<a href="#update-balance" id="update-balance" data-icon="update-balance"></a>
<a href="#usb" id="usb" data-icon="usb"></a>
<a href="#user" id="user" data-icon="user"></a>
<a href="#vibrate" id="vibrate" data-icon="vibrate"></a>
<a href="#video-mic" id="video-mic" data-icon="video-mic"></a>
<a href="#video-size" id="video-size" data-icon="video-size"></a>
<a href="#video" id="video" data-icon="video"></a>
<a href="#voicemail" id="voicemail" data-icon="voicemail"></a>
<a href="#wallpaper" id="wallpaper" data-icon="wallpaper"></a>
<a href="#wifi-1" id="wifi-1" data-icon="wifi-1"></a>
<a href="#wifi-2" id="wifi-2" data-icon="wifi-2"></a>
<a href="#wifi-3" id="wifi-3" data-icon="wifi-3"></a>
<a href="#wifi-4" id="wifi-4" data-icon="wifi-4"></a>
<a href="#wifi-permissions" id="wifi-permissions" data-icon="wifi-permissions"></a>
</section>
</body>
</html>