Permalink
Browse files

Icons Showcase

  • Loading branch information...
1 parent 76df669 commit 4e9aba658ea582e92b4d672c271130bc86381e3a @nolimits4web committed Nov 2, 2016
View
@@ -279,7 +279,10 @@
gulp.task('ks-ios-jade', function (cb) {
gulp.src(paths.ks.ios.jade)
.pipe(jade({
- pretty: true
+ pretty: true,
+ data: {
+ icons: require('./manifest-icons-ios.json').icons
+ }
}))
.pipe(gulp.dest(paths.ks.ios.root))
.pipe(connect.reload())
@@ -304,7 +307,10 @@
gulp.task('ks-material-jade', function (cb) {
gulp.src(paths.ks.material.jade)
.pipe(jade({
- pretty: true
+ pretty: true,
+ data: {
+ icons: require('./manifest-icons-material.json').icons
+ }
}))
.pipe(gulp.dest(paths.ks.material.root))
.pipe(connect.reload())
@@ -395,3 +395,18 @@ form .f7-icons {
text-align: center;
opacity: 0.5;
}
+.ks-demo-icon {
+ text-align: center;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ color: #333;
+}
+.ks-demo-icon .icon-name {
+ margin-top: 5px;
+ font-size: 11px;
+ color: #666;
+}
+code {
+ background: #f3f3f3;
+ padding: 5px;
+}
Oops, something went wrong.
@@ -222,6 +222,14 @@
<div class="item-title">Grid</div>
</div>
</div></a></li>
+ <li><a href="icons.html" class="item-link">
+ <div class="item-content">
+ <div class="item-media"><i class="icon icon-f7"></i></div>
+ <div class="item-inner">
+ <div class="item-title">Icons</div>
+ <div class="item-after"><span class="badge bg-green">256</span></div>
+ </div>
+ </div></a></li>
<li><a href="infinite-scroll.html" class="item-link">
<div class="item-content">
<div class="item-media"><i class="icon icon-f7"></i></div>
@@ -0,0 +1,37 @@
+.navbar
+ .navbar-inner
+ .left.sliding
+ a(href="index.html").back.link
+ i.icon.icon-back
+ span Back
+ .center.sliding Icons
+ .right
+ a(href="#").open-panel.link.icon-only
+ i.icon.icon-bars
+.pages.navbar-through
+ .page(data-page="icons")
+ .page-content
+ .content-block
+ .content-block-inner
+ p Framework7 comes with the premium and free <a href="https://github.com/nolimits4web/Framework7-Icons" class="external" target="_blank">Framework7 Icons</a> iOS-icons font developed specially to be used with iOS theme of Framework7. As for Material theme we recommend to use great-designed <a href="https://material.io/icons/" class="external" target="_blank">Material Icons</a> font. Both of these fonts use a typographic feature called <a href="http://alistapart.com/article/the-era-of-symbol-fonts" class="external" target="_blank">ligatures</a>. It’s easy to incorporate icons into your app. Here’s a small example:
+ p
+ code &lt;i class="f7-icons"&gt;home&lt;/i&gt;
+ | -
+ i.f7-icons home
+ p <a href="http://alistapart.com/article/the-era-of-symbol-fonts" class="external" target="_blank">Ligatures</a> allow rendering of an icon glyph simply by using its textual name. The replacement is done automatically by the web browser and provides more readable code than the equivalent numeric character reference.
+ p With ligatures it is also possible to combine icons like:
+ p
+ code &lt;i class="f7-icons"&gt;person&lt;sup&gt;add&lt;/sup&gt;&lt;/i&gt;
+ | -
+ i.f7-icons person<sup>add</sup>
+
+
+ .content-block-title iOS Icons Set (#{icons.length})
+ .content-block
+ .content-block-inner
+ .row
+ - for icon in icons
+ .ks-demo-icon.col-25.tablet-15
+ .icon
+ i.f7-icons #{icon.name}
+ .icon-name #{icon.name}
@@ -214,6 +214,15 @@ html
.item-inner
.item-title Grid
li
+ a(href="icons.html").item-link
+ .item-content
+ .item-media
+ i.icon.icon-f7
+ .item-inner
+ .item-title Icons
+ .item-after
+ span.badge.bg-green #{icons.length}
+ li
a(href="infinite-scroll.html").item-link
.item-content
.item-media
@@ -428,4 +428,20 @@ form .f7-icons {
height: 29px;
text-align: center;
opacity: 0.5;
+}
+// Demo Icon
+.ks-demo-icon {
+ text-align: center;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ color: #333;
+ .icon-name {
+ margin-top: 5px;
+ font-size: 11px;
+ color: #666;
+ }
+}
+code {
+ background: #f3f3f3;
+ padding: 5px;
}
@@ -288,3 +288,18 @@ div.ks-demo-lazy {
form .material-icons {
color: #757575;
}
+.ks-demo-icon {
+ text-align: center;
+ margin-top: 15px;
+ margin-bottom: 15px;
+ color: #333;
+}
+.ks-demo-icon .icon-name {
+ margin-top: 5px;
+ font-size: 11px;
+ color: #666;
+}
+code {
+ background: #f3f3f3;
+ padding: 5px;
+}
Oops, something went wrong.

0 comments on commit 4e9aba6

Please sign in to comment.