Promote Ali’s before the featureIconfont, gallery rich, support personalized customization, just add the icon you need, create a project to download to the local, in the project file directory can be recommended to use.

Three ways to use iconfont

1. Unicode

  • It is my custom to create an icon folder in the SRC directory to store the downloaded style files
  • Then create a style. CSS file in the SRC directory to unify the management styles
@font-face {
  font-family: "iconfont";
  src: url('./icon/iconfont.eot'); /* IE9*/
  src: url('./icon/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('./icon/iconfont.woff') format('woff'), /* chrome, firefox */
  url('./icon/iconfont.ttf') format('truetype'), /* Chrome, Firefox, Opera, Safari, Android, iOS 4.2+*'./icon/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}. Iconfont {background-color: RGB (255,255,255);"iconfont"! important; font-size:56px; color: red; font-style:normal; -webkit-font-smoothing: antialiased; - its - text - stroke - width: 0.2 px; -moz-osx-font-smoothing: grayscale; }Copy the code
  • Introduce style.css in main.js
import './style.css'
Copy the code
  • Now you can pick the appropriate icon and get the font encoding to apply to the page
<i class="iconfont"> &#xe627; 
Copy the code

2. Font-class

It works in a similar way to Unicode, just by modifying the style.css file

  • Modify style.css (also don’t forget to introduce it in main.js)
@import './icon/iconfont.css'
Copy the code
  • You can use font class to use ICONS on the page
<i class="iconfont icon-fenxiang"></i>
Copy the code

3. Symbol

Difference in unicode and the font – class, use the symbol need to introduce the js file, this method generated icon can need not send woff | eot | the vera.ttf | these many font library request, the advantages of both the former two methods, is really the vector icon, it is recommended to use.

  • Import the icon JS file in main.js
import './icon/iconfont.js'
Copy the code
  • Write icon styles in style.css (also don’t forget to introduce them in main.js)
.icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; }Copy the code
  • You can use the ICONS on the page as symbols
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-fenxiang"></use>
</svg>
Copy the code

Add: Encapsulate Icon components yourself

  • Component template Icon-svg.vue
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`} } } </script> <style> .svg-icon { width: 1em; height: 1em; Vertical - align: 0.15 em. fill: currentColor; overflow: hidden; } </style>Copy the code
  • Introduced the global
import IconSvg from '@/components/icon-svg'// Register icon-svg vue.component ('icon-svg', IconSvg)
Copy the code
  • Now you can use ICONS gracefully in your projects. Go ahead and try them out
<icon-svg icon-class="fenxiang" />
Copy the code