{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-bpm\\src\\views\\demo\\Iconfont.vue?vue&type=template&id=67c234ed&scoped=true&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\src\\views\\demo\\Iconfont.vue","mtime":1675071992788},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\loaders\\templateLoader.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-bpm\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n<el-scrollbar style=\"height:600px\">\n  <div class=\"tab-container\">\n    <div class=\"content font-class\">\n      <ul class=\"icon_lists dib-box\">\n        <li class=\"dib\" v-for=\"(item,idx) in iconfont.glyphs\" :key=\"idx\">\n          <span class=\"icon iconfont\" :class=\"iconfont.css_prefix_text + item.font_class\"></span>\n          <div class=\"name\">{{item.name}}</div>\n          <div class=\"code-name\">#{{iconfont.css_prefix_text + item.font_class}}</div>\n        </li>\n      </ul>\n      <div class=\"article markdown\">\n        <h2 id=\"font-class-\">font-class 引用</h2>\n        <hr />\n\n        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>\n        <p>与 Unicode 使用方式相比，具有如下特点：</p>\n        <ul>\n          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>\n          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>\n          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>\n          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>\n        </ul>\n        <p>使用步骤如下：</p>\n        <h3 id=\"-fontclass-\">第一步：引入项目下面生成的 fontclass 代码：</h3>\n        <pre><code class=\"language-html\">&lt;link rel=\"stylesheet\" href=\"./iconfont.css\"&gt;</code></pre>\n        <h3 id=\"-\">第二步：挑选相应图标并获取类名，应用于页面：</h3>\n        <pre><code class=\"language-html\">&lt;span class=\"iconfont icon-xxx\"&gt;&lt;/span&gt;</code></pre>\n        <blockquote>\n          <p>\n            \"\n            iconfont\" 是你项目下的 font-family。可以通过编辑项目查看，默认是 \"iconfont\"。\n          </p>\n        </blockquote>\n        <code>\n          iconfont.css\n          添加\n          [class^=\"icon-\"], [class*=\" icon-\"] {\n          font-family: \"iconfont\" !important;\n          speak: none;\n          font-style: normal;\n          font-weight: normal;\n          font-variant: normal;\n          text-transform: none;\n          line-height: 1;\n          vertical-align: baseline;\n          display: inline-block;\n          /* Better Font Rendering =========== */\n          -webkit-font-smoothing: antialiased;\n          -moz-osx-font-smoothing: grayscale;\n          }\n          .el-menu-item [class^=\"icon-\"] {\n          margin-right: 5px;\n          width: 24px;\n          text-align: center;\n          font-size: 18px;\n          vertical-align: middle;\n          }\n        </code>\n\n        <h2 id=\"font-class-\">字体图标旋转</h2>\n        <hr />\n        <p>在字体图标上添加icon-spin可以让字体图标一直旋转</p>\n        <i\n          class=\"icon-sync icon-spin\"\n          style=\"font-size: 24px;font-weight: bold; margin-right: 20px;\"\n        />\n        <i\n          class=\"icon-reload icon-spin\"\n          style=\"font-size: 24px;font-weight: bold; margin-right: 20px;\"\n        />\n        <hr />\n      </div>\n    </div>\n  </div>\n</el-scrollbar>\n",null]}