4

I use fontcustom v1.3.7 (same problem with anterior version) to create my fonticon.

CSS generated :

<!DOCTYPE html>
<html>
  <head>
    <title>fonticon glyphs preview</title>

    <style>
      /* Page Styles */

      * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        background: #fff;
        color: #444;
        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      a,
      a:visited {
        color: #888;
        text-decoration: underline;
      }
      a:hover,
      a:focus { color: #000; }

      header {
        border-bottom: 2px solid #ddd;
        margin-bottom: 20px;
        overflow: hidden;
        padding: 20px 0;
      }

      header h1 {
        color: #888;
        float: left;
        font-size: 36px;
        font-weight: 300;
      }

      header a {
        float: right;
        font-size: 14px;
      }

      .container {
        margin: 0 auto;
        max-width: 1200px;
        min-width: 960px;
        padding: 0 40px;
        width: 90%;
      }

      .glyph {
        border-bottom: 1px dotted #ccc;
        padding: 10px 0 20px;
        margin-bottom: 20px;
      }

      .preview-glyphs { vertical-align: bottom; }

      .preview-scale {
        color: #888;
        font-size: 12px;
        margin-top: 5px;
      }

      .step {
        display: inline-block;
        line-height: 1;
        position: relative;
        width: 10%;
      }

      .step .letters,
      .step i {
        -webkit-transition: opacity .3s;
        -moz-transition: opacity .3s;
        -ms-transition: opacity .3s;
        -o-transition: opacity .3s;
        transition: opacity .3s;
      }

      .step:hover .letters { opacity: 1; }
      .step:hover i { opacity: .3; }

      .letters {
        opacity: .3;
        position: absolute;
      }

      .characters-off .letters { display: none; }
      .characters-off .step:hover i { opacity: 1; }


      .size-12 { font-size: 12px; }

      .size-14 { font-size: 14px; }

      .size-16 { font-size: 16px; }

      .size-18 { font-size: 18px; }

      .size-21 { font-size: 21px; }

      .size-24 { font-size: 24px; }

      .size-36 { font-size: 36px; }

      .size-48 { font-size: 48px; }

      .size-60 { font-size: 60px; }

      .size-72 { font-size: 72px; }


      .usage { margin-top: 10px; }

      .usage input {
        font-family: monospace;
        margin-right: 3px;
        padding: 2px 5px;
        text-align: center;
      }

      .usage .point { width: 150px; }

      .usage .class { width: 250px; }

      footer {
        color: #888;
        font-size: 12px;
        padding: 20px 0;
      }

      /* Icon Font: fonticon */

      @font-face {
  font-family: "fonticon";
  src: url("./fonticon_ed588f9504b5f76691a94fc9db53fdc5.eot");
  src: url("./fonticon_ed588f9504b5f76691a94fc9db53fdc5.eot?#iefix") format("embedded-opentype"),
       url("./fonticon_ed588f9504b5f76691a94fc9db53fdc5.woff") format("woff"),
       url("./fonticon_ed588f9504b5f76691a94fc9db53fdc5.ttf") format("truetype"),
       url("./fonticon_ed588f9504b5f76691a94fc9db53fdc5.svg#fonticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "fonticon";
    src: url("./fonticon_ed588f9504b5f76691a94fc9db53fdc5.svg#fonticon") format("svg");
  }
}

      [data-icon]:before { content: attr(data-icon); }

      [data-icon]:before,
.picon-add:before  {
        display: inline-block;
  font-family: "fonticon";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
      }

.picon-add:before { content: "\f101"; }
    </style>

    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    <script>
      function toggleCharacters() {
        var body = document.getElementsByTagName('body')[0];
        body.className = body.className === 'characters-off' ? '' : 'characters-off';
      }
    </script>
  </head>

  <body class="characters-off">
    <div id="page" class="container">
      <header>
        <h1>fonticon contains 58 glyphs:</h1>
        <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
      </header>

      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".picon-add" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
        </div>
      </div>

      <div class="glyph">
        <div class="preview-glyphs">
          <span class="step size-12"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-14"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-16"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-18"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-21"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-24"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-36"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-48"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-60"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span><span class="step size-72"><span class="letters">Pp</span><i id="picon-add" class="picon-add"></i></span>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span>
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".picon-add" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
        </div>
      </div>

      <footer>
        Made with love using <a href="http://fontcustom.com">Font Custom</a>.
      </footer>
    </div>
  </body>
</html>

The rendering on Firefox, Safari, Opera, Vivaldi, etc it's ok :

Rendering good

But, with Chrome :

Rendering bad

The second icon is far below (don't visible on the pic) because the computed height is to 1522px and i don't understand this. I tried with extensionless Chrome and I removed cache.

Any idea ?

Regards, Johnny

3

1 Answer 1

1

We had the same problem, and this comment helped me solve the issue: https://github.com/FontCustom/fontcustom/issues/235#issuecomment-77133773

I had some paths in the input SVG files that were probably outside the SVG bounds. I removed them manually in a text editor and now the icons work correctly in all browsers.

SVG was invalid, but it wasn't visible in Illustrator, so we had to change bounds manually. That solved the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.