mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add Ionicons
This commit is contained in:
Jeremy Thomas
parent
83892a21e3
commit
0e869c8426
@ -9,10 +9,15 @@ env: "production"
|
||||
markdown: kramdown
|
||||
permalink: pretty
|
||||
url: http://bulma.io
|
||||
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
|
||||
mdi: https://cdn.materialdesignicons.com/1.7.22/css/materialdesignicons.min.css
|
||||
exclude: ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
|
||||
|
||||
# Icons
|
||||
|
||||
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
|
||||
iconic: https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css
|
||||
ionicons: http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
|
||||
mdi: https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css
|
||||
|
||||
# Variables
|
||||
|
||||
documentation: "/documentation/overview/start/"
|
||||
|
||||
@ -7,6 +7,12 @@
|
||||
<title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ site.fontawesome }}">
|
||||
{% if page.iconic %}
|
||||
<link rel="stylesheet" href="{{ site.iconic }}">
|
||||
{% endif %}
|
||||
{% if page.ionicons %}
|
||||
<link rel="stylesheet" href="{{ site.ionicons }}">
|
||||
{% endif %}
|
||||
{% if page.mdi %}
|
||||
<link rel="stylesheet" href="{{ site.mdi }}">
|
||||
{% endif %}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Icon
|
||||
iconic: true
|
||||
ionicons: true
|
||||
mdi: true
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
@ -22,6 +24,21 @@ variables:
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_color_example %}
|
||||
<span class="icon has-text-info">
|
||||
<i class="fa fa-info-circle"></i>
|
||||
</span>
|
||||
<span class="icon has-text-success">
|
||||
<i class="fa fa-check-square"></i>
|
||||
</span>
|
||||
<span class="icon has-text-warning">
|
||||
<i class="fa fa-warning"></i>
|
||||
</span>
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fa fa-ban"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_sizes_example %}
|
||||
<span class="icon">
|
||||
<i class="fa fa-camera-retro fa-lg"></i>
|
||||
@ -46,11 +63,11 @@ variables:
|
||||
<div class="container">
|
||||
<h1 class="title">Icons</h1>
|
||||
<h2 class="subtitle">
|
||||
Bulma is compatible with <strong>most icon libraries</strong>: <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, etc.
|
||||
Bulma is compatible with <strong>all icon font libraries</strong>: <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>, <a href="https://materialdesignicons.com">Material Design Icons</a>, <a href="https://useiconic.com/open">Open Iconic</a>, <a href="http://ionicons.com/">Ionicons</a> etc.
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
colors=false
|
||||
colors=true
|
||||
sizes=true
|
||||
variables=true
|
||||
%}
|
||||
@ -78,11 +95,21 @@ variables:
|
||||
By defualt, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome icons will <strong>inherit</strong> the font size.</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Colors" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Since icon fonts are simply <strong>text</strong>, you can use the <a href="/documentation/modifiers/typography-helpers/#colors">text color modifiers</a> to change the icon's color.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=icon_color_example %}
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The Bulma <code>icon</code> container should always be slightly bigger than the icon it contains. For example, Font Awesome icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
|
||||
The Bulma <code>icon</code> container comes in <strong>4 sizes</strong>. It should always be <em>slightly bigger</em> than the icon it contains. For example, Font Awesome icons use a font-size of <code>1em</code> by default (since it inherits the font size), but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -411,7 +438,7 @@ variables:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
For the sake of providing another example, here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
|
||||
Here is how the <code>icon</code> container can be used with <a href="https://materialdesignicons.com">Material Design Icons</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -731,6 +758,202 @@ variables:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Open Iconic" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="https://useiconic.com/open">Open Iconic</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
<th>Container size</th>
|
||||
<th>Iconic class</th>
|
||||
<th>Icon size</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-small</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1rem x 1rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>oi [data-glyph=puzzle-piece]</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-small">
|
||||
<span class="oi" data-glyph="puzzle-piece"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.5rem x 1.5rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>oi [data-glyph=puzzle-piece]</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<span class="oi" data-glyph="puzzle-piece"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-medium</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2rem x 2rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>oi [data-glyph=puzzle-piece]</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<span class="oi" data-glyph="puzzle-piece"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-large</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>3rem x 3rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>oi [data-glyph=puzzle-piece]</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<span class="oi" data-glyph="puzzle-piece"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Ionicons" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Here is how the <code>icon</code> container can be used with <a href="http://ionicons.com">Ionicons</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Container class</th>
|
||||
<th>Container size</th>
|
||||
<th>Ionicon class</th>
|
||||
<th>Icon size</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-small</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1rem x 1rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>ion-ionic</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-small">
|
||||
<span class="ion-ionic"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.5rem x 1.5rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>ion-ionic</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<span class="ion-ionic"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-medium</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2rem x 2rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>ion-ionic</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<span class="ion-ionic"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>icon is-large</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>3rem x 3rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>ion-ionic</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<span class="ion-ionic"></span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user