Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Quick PSA on icon fonts and ligatures

Long Live Icon Fonts!

or, a Quick PSA on icon fonts and ligatures.

tl;dr: keep using icon fonts, they are nice, just enable ligatures

These are my talking notes at the http://wwweeklies.com/ on 2015-12-04:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon font demo</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
section {
margin: 30px;
padding: 15px 30px 30px 30px;
background: white;
border-radius: 5px;
}
input {
margin-bottom: 10px;
}
button i.fa {
font-size: 150% !important;
}
</style>
</head>
<body>
<section>
<h3>Newsletter subscriptions</h3>
<input type="email" class="form-control" placeholder="jane.doe@example.com">
<button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button>
<button type="submit" class="btn btn-danger"><i class="fa fa-trash"></i></button>
</section>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Icon font demo with ligatures</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
section {
margin: 30px;
padding: 15px 30px 30px 30px;
background: white;
border-radius: 5px;
}
input {
margin-bottom: 10px;
}
button i.material-icons {
line-height: 1.3 !important;
}
</style>
</head>
<body>
<section>
<h3>Newsletter subscriptions</h3>
<input type="email" class="form-control" placeholder="jane.doe@example.com">
<button type="submit" class="btn btn-primary"><i class="material-icons">search</i></button>
<button type="submit" class="btn btn-danger"><i class="material-icons">delete</i></button>
</section>
</body>
</html>
@jpdevries

This comment has been minimized.

Copy link

commented Dec 16, 2015

I'm a fan of creating SVG sprites with <use> but wow. This is brilliant. I love the Cmd + F support.

How would you handle i18n with this though? Would you need a separate font file with different ligatures for each language?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.