vue中阿里图标库iconfont的设置

步骤

基本使用

1 下载存放

从阿里图标库中下载压缩包，解压开目录如下

在vue项目的assets下创建font文件夹，把这些文件复制到font文件夹下，为了有条理再创建styles文件夹，目录如下

2 设置

在styles文件夹下创建font.css，复制下载下来的iconfont.css内容到font.css中，原先内容如下，将该文件内容复制到font.css再根据自己的项目修改url地址

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1562837780571'); /* IE9 */
  src: url('iconfont.eot?t=1562837780571#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAnIAAsAAAAAExwAAAl7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEQgqWNJFpATYCJANECyQABCAFhG0HgXYb4w9RlHBWF9nPAbcdHsFx60KdIteX+UGdp2TGZF5HuziCaknruZ1PMdlMeRRCosjCpKCQEo1DgjBLEp77a+7tpcjjd3w3H2SRFSrM37xAA5uFAoEGOtAn1AlDQt4JBaw7/7hpP0jTJuAB1rGKOq0z0UCYVmymZHOYscKEd0Nqjs0cps4OOxNZdghAA/f3a+h+r/5aNQ4jzz7YAnTEL+reLbN94+QBRf6ItE2oREYJPiGagrVJWiZesROzH8w4gV6LGhn3+kbGoURifGDCI9+1oCRSKgtiQndBZ4bSnDCuFepuPjefgC/2/eOfbJTQ6CiYSfcf9trQUX/UX2W73TZV9hx2V43XqyjYB/I1/0Vm0SNA8R2Xr7e2wHUxn5hRf9tSUZOTJTC8UaSOn3/zunTr0atPvwGDhgyD6MRQPwK+Fw/bPkriP3UqAdBQGVCoAkiqAjqoBuikOqCLGoBuagJ6qAXopTagjzqAfuoCBqgHGKS+akMOnkKpYSoeuXsVOALlOUC+vAW8q07Ba4vmemCoDd3XpCb0ZHLnoYJdgsVEhUZyqJiQo4eGYjyeOJsOZQwGxIhBBDGRAlScTo+LfSSfv8P3qcz7Ce7/TB74XNFj0znEUK9da53SHDyFwurV+pNNF6wqwXWfLlBhVtsvkUyfD1ec8eKsS6+HU4c8BajIkXIzENEr7nOixolST4G3Mvx+YvH5AMG++CqM0u/ORTBross7refMFcQ0Kbzh36QVynHD+KSpt09EmHUCmdLNpsJwgwKgb20qK8LQ2tWOBBRqJUZODXjN55NRvF58+z1vJGXEV8t+GIihjvrrNlXg5R03AmXtnTd9pW3t170RW9pc/oodgQ9lvjfxNsMF7SVhh/8tQhT4WCZobmm61qqyXbxoG1DNsHMdQM96yiG6J8WEa3cEfD91Vm8yaQrIktr1ELXc78dxJd+LY16frH2Vyqq1Q4Ov508u67e+6HvlazZaRJ0O9Y0HiTi994bWNYUmt99zqZLajRNrDAiiFRYXGoMe+KPp6vM3n6Js3ePrZwFt+4zrUc45OQrGhRQ1zggxZydqqk1gTgTDUFQHoO3yl0CQeocBM2OYQcvC+725yCV/uNxkEhqF8XuHbwGxIFneNnTi5IlYZPLU6UbCbKqDL7XKiKKqeEIU3a+wcfdKbazXO3vdkiZsobKeq3GoxSkm+hwitSghEFifZgVqNLaYZlJEIFoTPro6I7ZkX4ghtdphnhC021Sue8lyWrdLe2MqHbfqIeqUTrNlDUoQ05asaORPXrtxCqKPBerZ931RtGFvTSpJINGRLrNQiwOiq+3xrHEroG3b4tA5GZVlFeog8TXkg/a1aSqMGzTsnXyLZaJHtjbFavtGQZhqYwVB27ZIKummYQL6S7obw9yKowOHAS8xQf1Z+tupT+kr6U9T36Y/WmHQyvgfQnyco27a7Npp9v/03yV/37MqdevqNPv7Sd/pwaJ81kyKbDN3BtEW0TJTArr025CvkW368/9e2SGKm4/E79c4om/99x+HXxOtB+OPKlZEc+7DwGAu59ltdilZi/8vw8n3338a5Yx4485tZ9ShKNd77z1bwqrdBZQxJHcWl4xRgl21MQS0eTOkuCYwc5iAesjUpOOwpLaOdo2mKiU9ngxAWe9ZsKCnq2u2VPpJFxvySYO0XNvFm8sbGj422mg/ljbMBrHVcZ1LIHpLU2MnYEqfG4beDY8Pe9c41NgBMZctz25tAlRcfLXvB2hWZ+dsiEfGknNnOz9OIONIMF9Uu2ti1PQwTaFpC0Q4xRKQkfwtiK6lOdtrK3sqvUGJ/7fhp2sgkGXy3mNPQezH4hbit1y2ZHErgOSlxqHOSkAahpa0QJSIFdGNS34tzUSVXgOqpLeqpbXV5yn1klm1c+o05ulYUxVdJQU3a6T6nt5q3tbYQ7wQcpgz+ufizK2amiuuAv83/vjNCQfFFRxaXz00dJLZUdrBHDh2rHr9oYI4OMjxJjiy+SsezPsqeMpbPBr/LRMSzMNSlHP1M2aE/DSX2UEVHxRTOzLFAZxXwgFpPZwWk6tJoWVxebqM4LScXGgnXxmt5Ct0ETHy4uWYLZGKyC0xSv6+VUmaxESQlKhJSgKJIDPSpTRxFmxpq4eZ9Y4Zpbf33p5Z2ud7A1a0gSvpi2ZL3onaGLPhzHElS8v8UJelTiLLvjxXa5dUVUvUp766ag2Wvih+FSwNScjZJ1wJx0dsFCOaTd1Eo75Ta5aK+dwmxjGy4FrOeWnFBUZ5HrM+c2bk3shSifN/XvnfLIxZVdk3oppjG0fWt8zI0DcSm7o1iDhiYzy8UpizLyFECq+K16y1c2oiajijOwaIpDZtdnxhT0GerAMrLG7YbR4ctNyiuS1HTXDwrUdPmd1c1VluSuhPY9XVWQezFOJ7cF6+adJEOCImN6veOmxZWAOU3J9GlOCgHU5bseovn32VfsXwmSt6y20dTIs5kNyKCo7wVenxoqPcmqgakG0wXg2XMR1+P7lAcQ50LANPfX5neEeEvb+/mFMom3OMo5QAbLXbQPtUvpVlmnY7K8ur9q/AyADai+yrXs2iLIx1v0yZvwfhllB1X6adv0B77stEvkBp+Vj1/HZ5LlsEXhXxrKvS8r5Jz375UKwh28PNX38sv83sZf9NI7vlfzf69N7xE9YbLD6dvNVhe3RrsLrgkbs4RYHgJ/vD0LKR/KJle/s3FwQ9z19e8sIuK1oDyA4TRhwpJYaFvbyDFljjqK8kf6Iy9Q8jfyJIanRZgCUrYB0mAvaTOvQ5h50IuErqtadfdZ8xUr7IHuw6QFIY9i6pMegrLAj4DBMBX5I6TPrOdSIi8pN6PYh6Lftshl/WLdHSaJPcCvEZjx1RocvcxFF0F0JLEuZ+3yRK5fOYZMz030A/xii7kKEW3azWDnEkj0jf7REMQ04SyeeRadNDf9KUSjnvMk3GIyhzR0IWrdPaiJwVaR/DxZyjtbLE249CrgUhiyxY8Vt6EpIU/+JEhildQdiP4korTmW6ssiVpUm1g8j5Ehch+kg1CnkvRyTZN81DjGbyGnQnmqTITk5VZA6fH5175PStynQaibwokdERndEV3dETvfH8anMMxGAMxbBRa9RB0YGKLD8spC7ndgHNWXaZ+gbKZ5QnWERZyBXWUYVy0WdIcTmhoe96uqYEFdtW8fnCQmrzpbiKLqjyfMMglVJXIVMyqRrIpwtJSZ3uUurH7LKNUVhKbfRKAAA=') format('woff2'),
  url('iconfont.woff?t=1562837780571') format('woff'),
  url('iconfont.ttf?t=1562837780571') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1562837780571#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dp-icon-smail:before {
  content: "\e6d8";
}

.dp-icon-good:before {
  content: "\e6d9";
}

.dp-icon-bad:before {
  content: "\e6da";
}

.dp-icon-basic-ope:before {
  content: "\e6db";
}

.dp-icon-close:before {
  content: "\e6dc";
}

.dp-icon-service-exp-light:before {
  content: "\e6dd";
}

.dp-icon-basic-ope-light:before {
  content: "\e6de";
}

.dp-icon-service-exp:before {
  content: "\e6df";
}

.dp-icon-down:before {
  content: "\e6e0";
}

.dp-icon-use-exp-light:before {
  content: "\e6e1";
}

.dp-icon-smart-service-light:before {
  content: "\e6e2";
}

.dp-icon-smart-service:before {
  content: "\e6e3";
}

.dp-icon-up:before {
  content: "\e6e4";
}

.dp-icon-use-exp:before {
  content: "\e6e5";
}

.dp-icon-increase:before {
  content: "\e6e6";
}

.dp-icon-decrease:before {
  content: "\e6e7";
}

要把url地址改一下，改成相对地址，比如在我的项目目录中，地址可改变如下

@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../font/iconfont.woff2') format('woff2'),
    url('../font/iconfont.woff') format('woff'),
    url('../font/iconfont.ttf') format('truetype'),
    url('../font/iconfont.svg#iconfont') format('svg');
}

3 引入

在main.js中引入css文件

import './assets/styles/font.css'

4 使用

每个图标都有自己的unicode码，使用的时候直接替换以下span的unicode码（打开demo_index.html可看到码）

<span class="iconfont">&#x33;</span>

或者因为font.css里设置了class，用class也可以，更好理解

<span class="iconfont dp-icon-good"></span>

修改样式

在具体组件中使用的时候有时候想改icon的颜色，大小
直接在template中对其进行设置，比如test-part下的图标

.test-part iconfont{
color:red;
font-size:32px;
}

【注意】template不可以加scope，否则设置不了。font-size用来改变大小，对iconfont的使用可以看做和字体类似