VUE开发--阿里图标(六十五)

2019-09-20 本文已影响0人无剑_君

一、图标下载

下载
网址：https://www.iconfont.cn/
添加购物车

下载图标

解压下载文件

解压文件

二、使用方法

Unicode 引用
Unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

拷贝字体文件

<template>
  <div id="app">
 <span class="icon iconfont">&#xebb7;</span>
  </div>
</template>
<style>
@import "./style/iconfont.css";
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@font-face {
  font-family: 'iconfont';
  src: url('fonts/iconfont.eot');
  src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
      url('fonts/iconfont.woff2') format('woff2'),
      url('fonts/iconfont.woff') format('woff'),
      url('fonts/iconfont.ttf') format('truetype'),
      url('fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} 
</style>

注意：必须使用内部样式

font-class 引用
新建style目录，拷贝样式文件iconfont.css到目录，并修改字体文件路径。

@font-face {font-family: "iconfont";
  src: url('../fonts/iconfont.eot?t=1567544488860'); /* IE9 */
  src: url('../fonts/iconfont.eot?t=1567544488860#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMIAAsAAAAABsgAAAK6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBTIE/ATYCJAMICwYABCAFhG0HOBvtBRHVk2FkXx7wZKj5ywEjoVYDNmpm6+x08vN1fOGA8NUE93PwfO73eW6SJQAFEoksAHXm2xLYOiDVqir2KFe/ranKGROwIKFALxhU5PAulLGkz+fnyeoCEPYKSBsgAA5063LRFv/GzkHxj/GswXWm8EywAQeWSiwbDoDbAeAT907/aHkg8513Oa69+VMXYBxIAe2NUSABF0joDWM3ETzA+xDAmXCppLCrbGSGASwTQCbtSB+zQhyDcUqOCPYNew1yih2Oak99Apzw78tfbY6gsNOAjlouGuTp72CFXrVCJyVIgGActgM0kAoMSGNjvhqGiMPXOOdHRONYrQJ/zzp1Ike1Ic5fB5pdAQjV5c+kwMpHlVYAGBgOmaBy0tuD9g70Xmlsvr9JTWr10cGTAO3f8qRb+u97bO/dQq0+i+u7FwkDD0b02vPWO9B7Sf3Xom0BAzfYd8Vv8fLWfuz5xzlx8wrxclXq7S7+eDyHT4+MDQdyvLKFnO3S0qzBVsgcrL8Uvx3L/7D3V44DEmEMuQCAdQ2NvX/zN9Sdu16qR+at49IA8DVvy6PWDcOCgOM5AwL/TjGwy8Qq4FAmVDSWFZn0PWmdYQosIOzt11Sz342WBUf8bjfoQFgGjSOxpGGnwg4XMmCPIzlwJkXJYRd8zMMQMU5Asi0NgqcXULjzChpPn0nD/gk7/P2HPZ5pONNc+JzpQnyiXSh0Vrrh5QftNUVGLl2I1mcyH/4seRUXvJP0NoVNWZdLW4okS2zoP02rysiSAnbaY+R9wizpQVct76p5U1Xc9KLymgIsQKGz0g0vP2ivKTLtr4vK55/JfPizdDBGsu8kvR0dm7IeQG71cRDjUZ7pP02rysiSAnbaLPI+YW6e9aCrlvcJ2bypYC8eqi+3N4a/OwDAAoBlUMDOIWBSNJEw72ZjPxYAAAA=') format('woff2'),
  url('../fonts/iconfont.woff?t=1567544488860') format('woff'),
  url('../fonts/iconfont.ttf?t=1567544488860') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../fonts/iconfont.svg?t=1567544488860#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;
}

.icon-gongnengdingyi:before {
  content: "\ebb7";
}

页面文件：

<template>
  <div id="app">
    <span class="icon iconfont icon-gongnengdingyi"></span>
  </div>
</template>
<script>
export default {
  name: "app",
  components: {}
};
</script>

<style>
@import "./style/iconfont.css";
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

注意：
引入样式无件

@import "./style/iconfont.css";

Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

在public中创建文件，拷贝iconfont.js到目录:

拷贝iconfont.js

在index.html文件引入：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="/static/iconfont.js"></script>  
    <title>测试</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but tiamat-vue-apsu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

页面文件：

<template>
  <div id="app">
    <!-- <router-view /> -->
    <svg class="icon svg-icon" aria-hidden="true">
      <!-- 在vue组件中引用,href里面的#icon-gongnengdingyi即图标类名 -->
      <use xlink:href="#icon-gongnengdingyi" />
    </svg>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 添加样式文件*/
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

测试结果

二、在线使用

将项目添加至项目

将项目添加至项目

复制代码

font-class 引用

引入样式
当前组件：

<style>
@import url('http://at.alicdn.com/t/font_1385289_q2z16ka4hq.css');
</style>

模板加入：

<i style="font-size:50px;" class='iconfont icon-scan'></i>

结果预览

结果预览

Symbol 引用
index.html引入js：

<script src="http://at.alicdn.com/t/font_1385289_q2z16ka4hq.js"></script>

图标使用：

复制代码

<template>
  <div id="app">
    <!-- <router-view /> -->
    <svg class="icon svg-icon" aria-hidden="true">
      <!-- 在vue组件中引用,href里面的#icon-gongnengdingyi即图标类名 -->
      <use xlink:href="#icon-scan" />
    </svg>
  </div>
</template>

<script>
export default {
  name: "app",
  components: {}
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 添加样式文件*/
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

结果显示

注：如果是彩色图标请使用此方式。

VUE开发--阿里图标(六十五)

一、图标下载

二、使用方法

二、在线使用

猜你喜欢

热点阅读