Icons Showcase

Author: nolimits4web

gulpfile.js

@@ -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())

kitchen-sink-ios/css/kitchen-sink.css

@@ -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;
+}

kitchen-sink-ios/icons.html

@@ -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>

kitchen-sink-ios/index.html

@@ -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}

kitchen-sink-ios/jade/icons.jade

@@ -213,6 +213,15 @@ html
                           i.icon.icon-f7
                         .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

kitchen-sink-ios/jade/index.jade

@@ -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;
 }

kitchen-sink-ios/less/kitchen-sink.less

@@ -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;
+}