iconfontの使い方

17788 ワード
先端開発 同前 JavaScript 晴れの日はちょっと寂しいです 先端三方モジュールライブラリ
iconfontファイルは静的資源assitesの下に置いています.毎回iconfontフォルダを更新すればいいです.
ページの操作は以下の通りです.スプレーしないでください.
<template>
    <div class="main">
        iconfont
        <ul>  cdn  iconfont
            <li class="iconfont">li>
            <li class="iconfont">li>
            <li class="iconfont">li>
            <li class="iconfont">li>
            <li class="iconfont">li>          
            <li class="iconfont">li>
            <li class="iconfont">li>
        ul>   
        <ul class="scssColor">  cdn  +scss--iconfont
            <li class="iconfont">li>
            <li class="iconfont">li>
            <li class="iconfont">li>
            <li class="iconfont">li>
            <li class="iconfont">li>          
            <li class="iconfont">li>
            <li class="iconfont">li>
        ul>       
        <p class="iconfont ">cdn       ：
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shuye6">use>
            svg>  
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shuye5">use>
            svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-jiachong">use>
            svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shumu">use>
            svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-xiaohua">use>
            svg>
        p>
        <p class="iconfont">cdn       ： 
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_8">use>
            svg>  
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_5">use>
            svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_1">use>
            svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_3">use>
            svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-Expression_9">use>
            svg>
        p>
    div>
template>

<script>
export default {
  data () {
    return {}
  }
}
script>

<style lang="scss" scoped>
@font-face {
  font-family: 'iconfont';  /* project id 477978 */
  src: url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.eot');
  src: url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.eot?#iefix') format('embedded-opentype'),
       url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.woff') format('woff'),
       url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.ttf') format('truetype'),
       url('//at.alicdn.com/t/font_477978_j03wladi4re5qaor.svg#iconfont') format('svg');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 26px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

/*     */

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

$red: #ff0000;
$orange: #ffa500;
$yellow: #ffff00;
$green: #008000;
$bluegreen: #00ffff;
$blue: #0000ff;
$purple: #800080;
$bgcolorlist: $red $orange $yellow $green $bluegreen $blue $purple;
@for $i from 1 to length($bgcolorlist) +1 {
  .scssColor li:nth-child(#{$i}) {
    color: nth($bgcolorlist, $i);
  }
}
.main {
  text-align: center;
  font-size: 26px;
}
ul {
  text-align: center;
  li {
    font-size: 26px;
  }
}
p {
  margin: 30px;
}
style>
システムで切り取り画像を呼び出します.