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
|
markdown: kramdown
|
||||||
permalink: pretty
|
permalink: pretty
|
||||||
url: http://bulma.io
|
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']
|
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
|
# Variables
|
||||||
|
|
||||||
documentation: "/documentation/overview/start/"
|
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>
|
<title>{% if page.fulltitle %}{{ page.fulltitle }}{% else %}{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}{% endif %}</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ site.fontawesome }}">
|
<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 %}
|
{% if page.mdi %}
|
||||||
<link rel="stylesheet" href="{{ site.mdi }}">
|
<link rel="stylesheet" href="{{ site.mdi }}">
|
||||||
{% endif %}
|
{% 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
|
title: Icon
|
||||||
|
iconic: true
|
||||||
|
ionicons: true
|
||||||
mdi: true
|
mdi: true
|
||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
@ -22,6 +24,21 @@ variables:
|
|||||||
</span>
|
</span>
|
||||||
{% endcapture %}
|
{% 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 %}
|
{% capture icon_sizes_example %}
|
||||||
<span class="icon">
|
<span class="icon">
|
||||||
<i class="fa fa-camera-retro fa-lg"></i>
|
<i class="fa fa-camera-retro fa-lg"></i>
|
||||||
@ -46,11 +63,11 @@ variables:
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title">Icons</h1>
|
<h1 class="title">Icons</h1>
|
||||||
<h2 class="subtitle">
|
<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>
|
</h2>
|
||||||
{%
|
{%
|
||||||
include meta.html
|
include meta.html
|
||||||
colors=false
|
colors=true
|
||||||
sizes=true
|
sizes=true
|
||||||
variables=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>
|
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>
|
</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" %}
|
{% include anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -411,7 +438,7 @@ variables:
|
|||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -731,6 +758,202 @@ variables:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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 %}
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user