FONTS - novayearbooks ¡ 1 AHJ FONTS Fonts List/Contents ..... 2 AHJ Fonts ..... 8
How i learned to stop using icon fonts and love svg (again)
-
Upload
sarah-semark -
Category
Design
-
view
114 -
download
1
Transcript of How i learned to stop using icon fonts and love svg (again)
Mexico City
Metro System
TL
TL
3
3
7
76 6
4
4
5
519 A
19
A
8
8B
B
2
2
12
12
Coyuya
El Rosario
Autobusesdel Norte
Indios Verdes
La Villa - BasĂlica
EduardoMolina
San AntonioAbad PantitlĂĄn
Ciudad Azteca
Plaza AragĂłn
OlĂmpica
Ecatepec
MĂşzquiz
RĂo de los Remedios
Impulsora
NezahualcĂłyotl
Villa de AragĂłn
Bosque de AragĂłn
Deportivo OceanĂa
OceanĂa
Terminal AĂŠrea
Hangares
AgrĂcola Oriental
Canal de San Juan
Tepalcates
Guelatao
PeĂąonViejo
Acatitla SantaMarta
Los Reyes La Paz
PueblaCiudadDeportiva
VelĂłdromoMixiuhca
Zaragoza
GĂłmezFarĂas
Boulevard Puerto AĂŠreo
Balbuena
Moctezuma
RomeroRubioRicardo Flores
MagĂłn
SanLĂĄzaro
Canal delNorte
Candelaria
Merced FrayServando
Jamaica
Tepito
Morelos
LagunillaGaribaldi
Allende
ZĂłcalo
Isabel laCatĂłlica
PinoSuĂĄrez
Chabacano
San Juande LetrĂĄn
Salto delAgua
Bellas Artes
Hidalgo
Guerrero
AragĂłn
TalismĂĄn
Consulado
â
La Viga
La Raza
Bondojito
MartĂnCarrera
Deportivo18 de Marzo
Potrero
Lindavista
PolitĂŠcnico
Insituto delPetrĂłleo
VallejoNorte 45FerrerĂaAzcapotzalcoTezozĂłmoc
Aquiles SerdĂĄn
Camarones
RefinerĂa
San JoaquĂn
Polanco
Auditorio
Constituyentes
San Pedrode los Pinos
San Antonio
Barrancadel Muerto
Buenavista
Tlatelolco
Misterios
Valle GĂłmez
JuĂĄrez
RevoluciĂłnSanCosme
NormalColegioMilitar
PopotlaCuitlĂĄhuacPanteones
CuatroCaminos Tacuba
Observatorio
Tacubaya
Mixcoac
JuanacatlĂĄn
Chapultepec
Sevilla
Insurgentes
CuauhtĂŠmoc
Balderas
Doctores
Obrera
NiĂąosHĂŠroes
HospitalGeneral
CentroMĂŠdico
EtiopĂa
Eugenia
DivisiĂłndel Norte
Zapata
CoyoacĂĄn
Viveros
Miguel Ăngelde Quevedo
Copilco
Universidad
Patriotismo Chilpancingo LĂĄzaro CĂĄrdenas
Viaducto
Xola
Villa de CortĂŠs
Nativitas
Portales
Ermita
GeneralAnaya
TasqueĂąa
TasqueĂąa
Insurgentes Sur Hospital20 de Noviembre
Parque delos Venados
Eje Central Mexicaltzingo
Atlalilco
CulhuacĂĄn
San AndrĂŠsTomatlĂĄn
LomasEstrella
Calle 11 PerifĂŠricoOriente
Tezonco Olivos Nopalera ZapotitlĂĄn Tlaltenco TlĂĄhuac
Santa Anita
Iztacalco
Apatlaco
Aculco
EscuadrĂłn 201
Iztapalapa Cerro de la Estrella
UAM-I ConstituciĂłnde 1917
Las Torres
Ciudad JardĂn
La Virgen
Xotepingo
Nezahualpilli
Registro Federal
TextitlĂĄn
El Vergel EstadioAzteca
Huipulco Xomali PerifĂŠrico Tepepan La Noria Huichapan FranciscoGoitia
Xochimilco
The scale in this map is not 100% geographically accurate, especially for the Tren Ligero.
The logos reproduced herein are copyright of the STC.
This map put together by Richard ([email protected] / @richardmtl )
<svg> <title>Heart</title> <desc>A fluorescent teal heart.</desc> <path class="heart" d="M25.79,10.7a4.77,4.77,..." /> </svg>
.skull-icon { background-image: url(âdata:image/svg+xmldata:application/octet-stream;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgoJPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5oZWFydCB7CgkJZmlsbDogI2I2ZmRmTQsNS42NSw3LjQ3LDguNDEsMi41NC0yLjc2LDUuMTItNS40OSw3LjUtOC40MSwxLjczLTIuMTEsMi45MS0zLjg1LDIuMzgtNi42M2gwWiIgLz4KPC9zdmc+CgâŚâ); background-repeat: no-repeat; background-position: 50% 50%; height: 1em; width: 1em; }
<svg style="display: none"> <symbol id="heart-icon"> <...> </symbol> <symbol id="skull-icon"> <...> </symbol>
</svg>
<a href=âhttp://twitter.com/sarahsemarkâ> <svg class=âtwitter-iconâ> ⌠</svg> <span class=âscreen-reader-textâ>Twitter</span> </a>
add_theme_support( âjetpack-social-menuâ );
function themeslug_social_menu() { if ( has_nav_menu( âjetpack-social-menuâ ) ) : ?> <nav class=âjetpack-social-navigationâ role=ânavigationâ> <?php wp_nav_menu( array ( âtheme_locationâ => âjetpack-social-menuâ, âlink_beforeâ => ââ, âlink_afterâ => ââ, ) ); ?> </nav> <?php endif; }
const SkullIcon = React.createClass( { render() { return( <svg className=âskull-iconâ> ⌠</svg> ) } } );
<svg role="img" aria-labelledby=âskull-title"> <title id="#skull-title">skull</title> <use xlink:href="#skull-icon"></use> </svg>
QUESTIONS?@sarahsemark
github.com/sarahmonster/easy-as-svg
triggersandsparks.com/talks/svg-icons