Cacher is the code snippet organizer for pro developers

現在試験運用中。

Overview

References

• Materialize.css
  • Materialize.css
  • GitHub
  • 実は Google 製じゃない
• Material Icons
  • Official
  • Guide
  • GitHub
  • How to use?

TIPS & SAMPLE CODES

Loading

<!-- Depended on jQuery & jQuery-UI -->
    <?= $this->Html->script('jquery-2.2.4.min.js') ?>
    <?= $this->Html->css('jquery-ui.min.css') ?>
    <?= $this->Html->script('jquery-ui.min.js') ?>
    <?= $this->Html->css('material-icons.css') ?>
    <?= $this->Html->css('materialize.min.css') ?>
    <?= $this->Html->script('materialize.min.js') ?>

Icon localize

1. DL fonts by github like THIS
2. Set material-icons.css like THIS

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url('/fonts/MaterialIcons-Regular.woff2') format('woff2'),
    url('/fonts/MaterialIcons-Regular.woff') format('woff'),
    url('/fonts/MaterialIcons-Regular.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  vertical-align: middle;
  line-height: .4;
  padding-bottom: 1px;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Insert before/after content

1. Check unicode by manual
   • e.g.) <i class="material-icons">&#xE053;</i>
2. Replace &#x to \
3. Insert to content
4. Set font-family: 'Material Icons';

th a::before {
  content: '\E164';  // insert unicode
  font-family: 'Material Icons';
  display: block;
  position: absolute;
  top: -1rem;
  left: -1rem;
  margin: auto;
  font-size: 1.2rem;
}