Add menu icon to icon font

Closes #186

- Adds the menu icon from Ghost's icon set
- Alters CSS to use that new icon
This commit is contained in:
Paul Adam Davis 2015-03-23 16:21:53 +00:00
parent acc6896393
commit b071548965
10 changed files with 21 additions and 9 deletions

View File

@ -160,6 +160,9 @@ table { border-collapse: collapse; border-spacing: 0; }
.icon-link:before { .icon-link:before {
content: "\f608"; content: "\f608";
} }
.icon-menu:before {
content: "\f609";
}
/* ========================================================================== /* ==========================================================================
@ -792,13 +795,18 @@ body.nav-opened .nav {
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
transition: all 0.5s ease; transition: all 0.5s ease;
} }
.menu-button:before {
font-size: 12px;
font-weight: bold;
margin-right: 6px;
color: #fff !important;
position: relative;
top: 1px;
transition: all 0.5s ease;
}
.menu-button:focus { .menu-button:focus {
outline: 0; outline: 0;
} }
.menu-button .burger {
font-size: 12px;
margin-right: 6px;
}
body.nav-opened .menu-button { body.nav-opened .menu-button {
padding: 0 12px; padding: 0 12px;
@ -843,6 +851,9 @@ body.nav-opened .menu-button .word {
border-color: #fff; border-color: #fff;
background: #fff; background: #fff;
} }
.main-nav.overlay a:hover:before {
color: #222;
}
/* Add a border to the buttons on hover */ /* Add a border to the buttons on hover */
.menu-button:hover { .menu-button:hover {

Binary file not shown.

View File

@ -16,4 +16,5 @@
<glyph unicode="&#xf606;" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" /> <glyph unicode="&#xf606;" d="M435.2 454.4h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-435.2h102.4v435.2c0 14.131-11.443 25.6-25.6 25.6zM281.6 300.8h-56.32c-14.131 0-20.48-11.469-20.48-25.6v-281.6h102.4v281.6c0 14.131-11.443 25.6-25.6 25.6zM128 147.2h-56.32c-14.131 0-20.48-11.443-20.48-25.6v-128h102.4v128c0 14.157-11.469 25.6-25.6 25.6z" />
<glyph unicode="&#xf607;" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" /> <glyph unicode="&#xf607;" d="M256 428.8c-70.707 0-128-57.319-128-128 0-122.214 128-281.6 128-281.6s128 159.386 128 281.6c0 70.681-57.293 128-128 128zM256 230.144c-38.169 0-69.12 30.951-69.12 69.12s30.951 69.12 69.12 69.12 69.12-30.951 69.12-69.12-30.95-69.12-69.12-69.12z" />
<glyph unicode="&#xf608;" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" /> <glyph unicode="&#xf608;" d="M201.19 103.834l-20.736-20.582c-17.971-17.792-47.181-17.817-65.126 0-8.627 8.576-13.363 19.917-13.363 32.026s4.761 23.475 13.363 32.051l76.288 75.699c15.795 15.693 45.542 38.759 67.226 17.255 9.959-9.881 26.035-9.805 35.891 0.128 9.882 9.933 9.83 26.010-0.128 35.891-36.839 36.557-91.315 29.798-138.752-17.255l-76.288-75.699c-18.279-18.176-28.365-42.343-28.365-68.070 0-25.702 10.087-49.869 28.391-68.045 18.841-18.714 43.571-28.032 68.301-28.032s49.511 9.318 68.352 28.032l20.736 20.608c9.958 9.882 10.010 25.959 0.128 35.865-9.881 9.933-25.958 9.984-35.917 0.128zM432.409 397.85c-39.577 39.27-94.899 41.395-131.558 5.043l-25.831-25.626c-9.959-9.882-10.035-25.933-0.154-35.891 9.907-9.958 25.959-10.010 35.891-0.128l25.83 25.625c18.969 18.841 43.827 11.034 60.058-5.043 8.627-8.55 13.363-19.942 13.363-32.026 0-12.109-4.762-23.475-13.363-32.026l-81.408-80.742c-37.197-36.915-54.682-19.61-62.131-12.211-9.958 9.882-26.010 9.805-35.865-0.128-9.881-9.959-9.831-26.035 0.128-35.891 17.075-16.947 36.608-25.344 57.037-25.344 25.037 0 51.481 12.595 76.621 37.555l81.382 80.743c18.304 18.151 28.39 42.317 28.39 68.019s-10.087 49.894-28.39 68.070z" />
<glyph unicode="&#xf609;" d="M64 362.667h384q8.834 0 15.084-6.25t6.25-15.083-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.083 15.084 6.25zM64 106.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25zM64 234.667h384q8.834 0 15.084-6.25t6.25-15.084-6.25-15.084-15.084-6.25h-384q-8.834 0-15.084 6.25t-6.25 15.084 6.25 15.084 15.084 6.25z" />
</font></defs></svg> </font></defs></svg>

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Binary file not shown.

View File

@ -9,7 +9,7 @@
<nav class="main-nav overlay clearfix"> <nav class="main-nav overlay clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}} {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
{{#if @blog.navigation}} {{#if @blog.navigation}}
<a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a> <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}} {{/if}}
</nav> </nav>
</header> </header>

View File

@ -6,7 +6,7 @@
<nav class="main-nav overlay clearfix"> <nav class="main-nav overlay clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}} {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
{{#if @blog.navigation}} {{#if @blog.navigation}}
<a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a> <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}} {{/if}}
</nav> </nav>
<div class="vertical"> <div class="vertical">

View File

@ -10,7 +10,7 @@
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix"> <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}} {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
{{#if @blog.navigation}} {{#if @blog.navigation}}
<a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a> <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}} {{/if}}
</nav> </nav>
</header> </header>

View File

@ -10,7 +10,7 @@
<nav class="main-nav {{#if image}}overlay{{/if}} clearfix"> <nav class="main-nav {{#if image}}overlay{{/if}} clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}} {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
{{#if @blog.navigation}} {{#if @blog.navigation}}
<a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a> <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}} {{/if}}
</nav> </nav>
</header> </header>

View File

@ -6,7 +6,7 @@
<nav class="main-nav overlay clearfix"> <nav class="main-nav overlay clearfix">
{{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}} {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
{{#if @blog.navigation}} {{#if @blog.navigation}}
<a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a> <a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
{{/if}} {{/if}}
</nav> </nav>
<div class="vertical"> <div class="vertical">