mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Jeremy Thomas
parent
ac533a21c1
commit
cec282634e
@ -11,6 +11,9 @@
|
||||
|
||||
### Issues closed
|
||||
|
||||
* #930 Remove `vertical-align: top` for icons
|
||||
* #735 Font awesome custom `font-size`
|
||||
* #395 Font awesome stacked icons
|
||||
* #1152 Level-items not centered horizontally on mobile
|
||||
* #1147 Add `text-size-adjust: 100%` to `html`
|
||||
* #1106 `pagination` docs
|
||||
|
||||
2
docs/.gitignore
vendored
2
docs/.gitignore
vendored
@ -12,6 +12,6 @@ npm-debug.log
|
||||
# Folders
|
||||
.sass-cache
|
||||
/bulma
|
||||
/fontawesome
|
||||
/icons
|
||||
/styles/node_modules
|
||||
_site
|
||||
|
||||
@ -10,6 +10,7 @@ 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']
|
||||
|
||||
# Variables
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
<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.mdi %}
|
||||
<link rel="stylesheet" href="{{ site.mdi }}">
|
||||
{% endif %}
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
|
||||
@ -6,13 +6,13 @@
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
<i class="fa fa-lg fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
@ -154,12 +154,12 @@
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item is-hidden-desktop-only" href="{{ site.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fa fa-github"></i>
|
||||
<i class="fa fa-lg fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="navbar-item is-hidden-desktop-only" href="{{ site.twitter }}" target="_blank">
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fa fa-twitter"></i>
|
||||
<i class="fa fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
|
||||
@ -152,3 +152,6 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
color: $color-invert
|
||||
|
||||
.bd-icon-size .icon
|
||||
background-color: $yellow
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Icon
|
||||
mdi: true
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: icon
|
||||
@ -21,13 +22,31 @@ variables:
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture icon_sizes_example %}
|
||||
<span class="icon">
|
||||
<i class="fa fa-camera-retro fa-lg"></i>
|
||||
</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-camera-retro fa-2x"></i>
|
||||
</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-camera-retro fa-3x"></i>
|
||||
</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-camera-retro fa-4x"></i>
|
||||
</span>
|
||||
<span class="icon">
|
||||
<i class="fa fa-camera-retro fa-5x"></i>
|
||||
</span>
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Icons</h1>
|
||||
<h2 class="subtitle">
|
||||
Bulma is compatible with <strong><a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a></strong> icons.
|
||||
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.
|
||||
</h2>
|
||||
{%
|
||||
include meta.html
|
||||
@ -42,51 +61,333 @@ variables:
|
||||
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=icon_example %}
|
||||
<div class="block bd-icon-size">
|
||||
{% include snippet.html content=icon_example %}
|
||||
</div>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
The <strong>yellow background</strong> is only here for demonstration purposes, to highlight the icon container's area.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||
<p>The <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized at <code>1em</code>.</p>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>Font Awesome icons use a font-size of <strong>28px</strong> by default, and are best rendered when using <strong>multiples of 7</strong>.</p>
|
||||
<p>The Bulma <code>icon</code> container is always slightly bigger than the font-size used:</p>
|
||||
<p>
|
||||
The Bulma <code>icon</code> container should always be slightly bigger than the font-size used. For example, Font Awesome icons use a font-size of <code>1em</code> by default, but provides <a href="http://fontawesome.io/examples/">additional sizes</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Class</th>
|
||||
<th>Font-size</th>
|
||||
<th>Container class</th>
|
||||
<th>Container size</th>
|
||||
<th>Font Awesome class</th>
|
||||
<th>Icon size</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>icon is-small</code></td>
|
||||
<td><span class="icon is-small"><i class="fa fa-home"></i></span></td>
|
||||
<td>14px</td>
|
||||
<td>1rem x 1rem</td>
|
||||
<td>
|
||||
<code>icon is-small</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1rem x 1rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fa</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-small">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon</code></td>
|
||||
<td><span class="icon"><i class="fa fa-home"></i></span></td>
|
||||
<td>21px</td>
|
||||
<td>1.5rem x 1.5rem</td>
|
||||
<td>
|
||||
<code>icon</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.5rem x 1.5rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fa</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon is-medium</code></td>
|
||||
<td><span class="icon is-medium"><i class="fa fa-home"></i></span></td>
|
||||
<td>28px</td>
|
||||
<td>2rem x 2rem</td>
|
||||
<td rowspan="3">
|
||||
<code>icon is-medium</code>
|
||||
</td>
|
||||
<td rowspan="3">
|
||||
<code>2rem x 2rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fa</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>icon is-large</code></td>
|
||||
<td><span class="icon is-large"><i class="fa fa-home"></i></span></td>
|
||||
<td>42px</td>
|
||||
<td>3rem x 3rem</td>
|
||||
<td>
|
||||
<code>fa fa-lg</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.33em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-lg fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fa fa-2x</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<i class="fa fa-2x fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4">
|
||||
<code>icon is-large</code>
|
||||
</td>
|
||||
<td rowspan="4">
|
||||
<code>3rem x 3rem</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>fa</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fa fa-lg</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>1.33em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-lg fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fa fa-2x</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>2em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-2x fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<code>fa fa-3x</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>3em</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<i class="fa fa-3x fa-home"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Icon variations" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Font Awesome also provides modifier classes for:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
fixed width icons
|
||||
</li>
|
||||
<li>
|
||||
bordered icons
|
||||
</li>
|
||||
<li>
|
||||
animated icons
|
||||
</li>
|
||||
<li>
|
||||
rotated & flipped icons
|
||||
</li>
|
||||
<li>
|
||||
stacked icons
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Font Awesome class</th>
|
||||
<th>Result</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Fixed width
|
||||
</td>
|
||||
<td>
|
||||
<code>fa fa-fw</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fa fa-home fa-fw"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Bordered
|
||||
</td>
|
||||
<td>
|
||||
<code>fa fa-border</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="icon">
|
||||
<i class="fa fa-home fa-border"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Animated
|
||||
</td>
|
||||
<td>
|
||||
<code>fa fa-refresh fa-spin</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fa fa-refresh fa-spin"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Rotated & flipped
|
||||
</td>
|
||||
<td>
|
||||
<code>fa fa-shield</code><br>
|
||||
<code>fa fa-shield fa-rotate-90</code><br>
|
||||
<code>fa fa-shield fa-rotate-180</code><br>
|
||||
<code>fa fa-shield fa-rotate-270</code><br>
|
||||
<code>fa fa-shield fa-flip-horizontal</code><br>
|
||||
<code>fa fa-shield fa-flip-vertical</code>
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon">
|
||||
<i class="fa fa-shield"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fa fa-shield fa-rotate-90"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fa fa-shield fa-rotate-180"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fa fa-shield fa-rotate-270"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fa fa-shield fa-flip-horizontal"></i>
|
||||
</span>
|
||||
<br>
|
||||
<span class="icon">
|
||||
<i class="fa fa-shield fa-flip-vertical"></i>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2">
|
||||
Stacked
|
||||
</td>
|
||||
<td>
|
||||
{% highlight html %}<span class="icon is-medium">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</span>{% endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-medium">
|
||||
<span class="fa-stack">
|
||||
<i class="fa fa-circle fa-stack-2x"></i>
|
||||
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
{% highlight html %}<span class="icon is-large">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-camera fa-stack-1x"></i>
|
||||
<i class="fa fa-ban fa-stack-2x has-text-danger"></i>
|
||||
</span>
|
||||
</span>{% endhighlight %}
|
||||
</td>
|
||||
<td class="bd-icon-size">
|
||||
<span class="icon is-large">
|
||||
<span class="fa-stack fa-lg">
|
||||
<i class="fa fa-camera fa-stack-1x"></i>
|
||||
<i class="fa fa-ban fa-stack-2x has-text-danger"></i>
|
||||
</span>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -58,7 +58,7 @@ $navbar-divider-background-color: $border !default
|
||||
border-color: $color-invert
|
||||
.navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
.navbar-dropdown .navbar-item:not(a)
|
||||
color: $navbar-item
|
||||
color: $color
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 2.5%)
|
||||
|
||||
@ -9,21 +9,13 @@ $icon-dimensions-large: 3rem !default
|
||||
justify-content: center
|
||||
height: $icon-dimensions
|
||||
width: $icon-dimensions
|
||||
.fa
|
||||
font-size: 21px
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: $icon-dimensions-small
|
||||
width: $icon-dimensions-small
|
||||
.fa
|
||||
font-size: 14px
|
||||
&.is-medium
|
||||
height: $icon-dimensions-medium
|
||||
width: $icon-dimensions-medium
|
||||
.fa
|
||||
font-size: 28px
|
||||
&.is-large
|
||||
height: $icon-dimensions-large
|
||||
width: $icon-dimensions-large
|
||||
.fa
|
||||
font-size: 42px
|
||||
|
||||
@ -4,11 +4,6 @@
|
||||
.delete
|
||||
+delete
|
||||
|
||||
.fa
|
||||
font-size: 21px
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
|
||||
.heading
|
||||
display: block
|
||||
font-size: 11px
|
||||
|
||||
Loading…
Reference in New Issue
Block a user