title: How to load custom icon fonts
body: <p>I am giving Vue 2x a try by building a mini project. Now I want to add custom icon fonts download from flaticon.com. I generated the project using <code>vue-cli webpack</code></p>
  
  <p>In <code>webpack.base.conf.js</code> I have this</p>
  
  <pre><code>...
  {
      test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
      loader: 'url-loader',
      options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
      }
  },
  ...
  </code></pre>
  
  <p>As with every other project, I use sass, which compiles well. So in my main sass file <code>app.scss</code> I added</p>
  
  <pre><code>...
  @font-face {
      font-family: "Flaticon";
      src: url("./assets/fonts/Flaticon.eot");
      src: url("./assets/fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
      url("./assets/fonts/Flaticon.woff") format("woff"),
      url("./assets/fonts/Flaticon.ttf") format("truetype"),
      url("./assets/fonts/Flaticon.svg#Flaticon") format("svg");
      font-weight: normal;
      font-style: normal;
  }
  
  @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
          font-family: "Flaticon";
          src: url("./assets/fonts/Flaticon.svg#Flaticon") format("svg");
      }
  }
  ...
  </code></pre>
  
  <p>It compiles with no error, but no icon is showing. If I try to change the fonts path, then I have errors. </p>
  
  <p>I display icons the same way I usually do:</p>
  
  <pre><code>&lt;i class="flaticon-check"&gt;&lt;/i&gt;
  </code></pre>