Font-Awesome

1、创建工程npm install –global vue-cli 安装脚手架vue init webpack vue-adminlte 初始化webpack 项目cd vue-adminlte 切换项目文件夹下npm install 安装依赖库npm run dev 运行项目2、安装 jquerynpm install jquery —save-dev并在build/webpack.base.conf.js中， 引入webpackvar webpack = require(‘webpack’);以及在当前文件下找到 module.exports 中 》resolve 〉alias 增加 如下alias: {‘vue$’: ‘vue/dist/vue.esm.js’,’@’: resolve(‘src’),‘components’: path.resolve(__dirname, ‘../src/components’),‘jquery’:path.resolve(__dirname,’../node_modules/jquery/src/jquery’)},//并增加如下:plugins: [ new webpack.ProvidePlugin({ $: “jquery”, jQuery: “jquery”, “windows.jQuery”:“jquery” })]然后在main.js中引入：import $ from ‘jquery’window.$ = $window.jQuery = $如果报eslint的错误，可能搭建项目时开启了es > 注释掉有关eslint检查将 createLintingRule 删掉（去除eslint检查 首选项 》设置）“vetur.validation.template”: false, “eslint.enable”: false不报错之后 测试一下 看是否真正的引进了jquery3、安装bootstrapnpm i bootstrap@3.3.0 –save在build/webpack.base.conf.js中 对比一下看是否齐全：alias: {‘vue$’: ‘vue/dist/vue.esm.js’,’@’: resolve(‘src’),‘components’: path.resolve(__dirname, ‘../src/components’),‘jquery’:path.resolve(_dirname,’../node_modules/jquery/src/jquery’)},引入： 在main.js中import ‘bootstrap/dist/css/bootstrap.min.css’import ‘bootstrap/dist/js/bootstrap.min.js'4、安装 font-awesomenpm i font-awesome –save引入： 在main.js中import ‘font-awesome/css/font-awesome.css'5、如果过程中报错 This dependency was not found: * !!vue-style-loader!css-loader。。npm install stylus-loader css-loader style-loader –save-dev如果还是如下：This dependency was not found: * !!vue-style-loader!css-loader?{“sourceMap”:true}!../../node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-3c7429a2”,“scoped”:false,“hasInlineConfig”:false}!sass-loader?{“sourceMap”:true}!../../node。。安装如下代码npm i sass-loader –savenpm i node-sass –save6、下载 /安装 adminLTE GitHub：https://github.com/almasaeed2…git下载：git clone https://github.com/almasaeed2…也可npm安装：（推荐）npm i admin-lte –save-dev引入： 在main.js中import ‘admin-lte/dist/css/AdminLTE.min.css’import ‘admin-lte/dist/css/skins/_all-skins.min.css’import ‘admin-lte/dist/js/adminlte.min'7、精简你的代码 测试是否引入 bootstrap、font-awesome启动项目 npm run dev8、那就开始 引用adminLTE中的 你要用的 一些代码吧在components下新建starter.vue文件打开node-modules》admin-lte》starter.html并复制整段的wrapper内容，放到starter.html中template下再复制 body的class类名 放到index.html中的body中修改路由信息 src/router/index.js9、保存 运行 npm run dev不用惊慌 打开App.vue10、其他什么 自己需要的页面 直接拿过来 修修改改吧node-modules 》admin-lte 》dist ...

背景最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单设置图标不难，方案就是字体图标，可供使用的图标库也有很多，比如阿里巴巴的 Iconfont，以及 Fontaswsome 等，问题在于如何优雅的提供几百个图标供用户选择，而不需要开发去一个一个的写标签，也不需要一个个的去找图标。字体图标库 Fontawesome 方案我们使用字体图标的方式，一般是一个 <i class=“iconfont icon-home”></i> 这样的标签，平常开发中用一些图标都是用到一个写一个，展示10个图标，就要写10个标签。在项目中本人使用的是 Fontawesome 图标库方案，使用它是因为提供的可用图标比较丰富，基本上不需要特意去找合适的图标，直接把它的图标库下载过来，免费的有800多个。这么多图标难道要一个一个手写800多个 i 标签吗？三连拒绝！Fontawesome 下载后的文件中提供一个 svg格式的精灵图，这个非常人性化，用 VSCode 打开这个SVG文件可以看到是熟悉的DOM，因为SVG本质上就是一个XML，既然是DOM，那么祭出JS大法吧，用浏览器打开这个SVG文件，在控制台编写如下代码获取所有的图标名称：const nodeArray = Array.from(document.querySelectorAll(‘symbol’));const names = nodeArray.map(item => item.id)names.toString()Icons组件大牛可以忽略拿到了所有图标的 name 那就好办了，一个数组循环呗。先别急着写代码，我们的目的是封装成组件复用，那么先创建一个 Icons 组件提供一个筛选框，然后给一个事件即可<template> <div class=“ui-fas”> <el-input v-model=“name” @input.native=“filterIcons” suffix-icon=“el-icon-search” placeholder=“请输入图标名称”></el-input> <ul class=“fas-icon-list”> <li v-for="(item, index) in iconList" :key=“index” @click=“selectedIcon(item)"> <i class=“fas” :class=”[‘fa-’ + item]" /> <span>{{item}}</span> </li> </ul> </div></template><script>import fontawesome from ‘@/extend/fontawesome/solid.js’export default { name: ‘compIcons’, data () { return { name: ‘’, iconList: fontawesome } }, methods: { filterIcons () { if (this.name) { this.iconList = this.iconList.filter(item => item.includes(this.name)) } else { this.iconList = fontawesome } }, selectedIcon (name) { this.$emit(‘selected’, name) }, reset () { this.name = ’’ this.iconList = fontawesome } }}</script>先把拿到的所有图标name放到一个 solid.js 文件中，输出为数组，在组件中引入，然后就是循环数组 iconList，输出i标签，Fontawesome 的使用方式是：<i class=“fas fas-图标name”></i>。筛选功能利用数组的 filter 方法，this.$emit(‘selected’, name) 方式返回给父组件图标名称。以上样式都是利用Element UI 的 Popover、Input 组件实现<el-form-item label=“图标：” > <el-popover placement=“left-start” width=“540” trigger=“click” @show="$refs.icons.reset()" popper-class=“popper-class”> <ui-icons ref=“icons” @selected=“selectedIcon” /> <el-input slot=“reference” placeholder=“请输入内容” readonly v-model=“form.menu_icon” style=“cursor: pointer;"> <template slot=“prepend”><i class=“fas” :class=”[‘fa-’ + form.menu_icon]"></i></template> </el-input> </el-popover></el-form-item>组件实现了，接下来就是引用，既可以直接到导入此组件引用，也可以挂载到全局进行使用，这里说说挂载到全局使用的方式，因为我的项目中所有的公共组件都是挂载到全局的方式使用。在组件平级新建一个 index.js 文件import IconsCompontent from ‘./Icons.vue’const Icons = { install(Vue) { Vue.component(‘ui-icons’, IconsCompontent); }}export default Icons;第4行为组件命名，此名称决定了如何使用组件，这里是ui-icons，那么使用的时候就是：<ui-icons />接着在项目 components 根目录新建 index.js，这里是所有组件的集合最后一步是在 main.js 中注册：import CustomComponents from ‘./components/index.js’Object.keys(CustomComponents).forEach(key => Vue.use(CustomComponents[key]))这样就可以在项目中任意.vue文件中以<ui-icons />方式使用组件了。后记点击图标后要不要关闭图标弹出层（Popover）呢？Popover 是需要鼠标点击其他地方才会隐藏的，选择一个图标后就关闭 Popover 呢，我的做法是：document.body.click()。selectedIcon (name) { this.form.menu_icon = name // document.body.click()}….完。 ...

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。┌────────┐ ┌────────────┐│iconfont│──┐ │ Project │└────────┘ │ ┌────────────┐ ┌────────┐ │ ┌────────┐ │ ├─▶│created font│─▶│download│──▶│ │use font│ │┌────────┐ │ └────────────┘ └────────┘ │ └────────┘ ││icomoon │──┘ └────────────┘└────────┘使用说明图标字体只能被渲染成单色，不能生成 彩色图标。图标将放到平台中维护，下载字体文件到项目中使用，这样团队维护生成字体成本将非常高。通过图标平台网站下载 svg 图标，将图标放到项目中管理，通过 svgtofont.js 工具来生成它，这将是新的字体图标使用方式： ┌────────────────────┐ │ Project │ │ │┌────────┐ │ ┌───────────┐ ││iconfont│──┐ │ │ svg │──┐ │└────────┘ │ ┌────────────┐ │ └───────────┘ │ │ ├─▶│download svg│──▶│ ┌───────────┐ │ │┌────────┐ │ └────────────┘ │┌──│create font│◀─┘ ││icomoon │──┘ ││ └───────────┘ │└────────┘ ││ ┌───────────┐ │ │└─▶│ use font │ │ │ └───────────┘ │ └────────────────────┘新的方式维护方式好处：不需要知道第三方平台账号维护，将图标下载到项目中维护图标，不再维护字体文件生成彩色图标文件 SVG Symbol 在项目中使用svgtofont读取一组 SVG图标并从SVG图标输出 TTF/EOT/WOFF/WOFF2/SVG 字体，字体生成器。特性支持的字体格式：WOFF2，WOFF，EOT，TTF和SVG。支持 SVG Symbol 文件。自动生成模板（例如css，less等），可以直接使用。自动生成预览网站，预览字体文件。实例https://github.com/uiw-react/…https://github.com/uiw-react/…安装npm i svgtofont使用简单的使用方式const svgtofont = require(“svgtofont”); svgtofont({ src: path.resolve(process.cwd(), “icon”), // svg 图标目录路径 dist: path.resolve(process.cwd(), “fonts”), // 输出到指定目录中 fontName: “svgtofont”, // 设置字体名称 css: true, // 生成字体文件}).then(() => { console.log(‘done!’);});高级用法const svgtofont = require(“svgtofont”);const path = require(“path”);svgtofont({ src: path.resolve(process.cwd(), “icon”), // svg 图标目录路径 dist: path.resolve(process.cwd(), “fonts”), // 输出到指定目录中 fontName: “svgtofont”, // 设置字体名称 css: true, // 生成字体文件 startNumber: 20000, // unicode起始编号 svgicons2svgfont: { fontHeight: 1000, normalize: true }, // website = null, 没有演示html文件 website: { title: “svgtofont”, // Must be a .svg format image. logo: path.resolve(process.cwd(), “svg”, “git.svg”), version: pkg.version, meta: { description: “Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.”, keywords: “svgtofont,TTF,EOT,WOFF,WOFF2,SVG” }, description: ``, links: [ { title: “GitHub”, url: “https://github.com/jaywcjlove/svgtofont” }, { title: “Feedback”, url: “https://github.com/jaywcjlove/svgtofont/issues” }, { title: “Font Class”, url: “index.html” }, { title: “Unicode”, url: “unicode.html” } ], footerInfo: Licensed under MIT. (Yes it's free and &lt;a href="https://github.com/jaywcjlove/svgtofont"&gt;open-sourced&lt;/a&gt; }}).then(() => { console.log(‘done!’);});;APIsvgtofont 提供 API，可以一个一个的自己生成，也可以自动通过上面方法自动生成const { createSVG, createTTF, createEOT, createWOFF, createWOFF2} = require(“svgtofont/src/utils”);const options = { … };createSVG(options) // SVG => SVG Font .then(UnicodeObjChar => createTTF(options)) // SVG Font => TTF .then(() => createEOT(options)) // TTF => EOT .then(() => createWOFF(options)) // TTF => WOFF .then(() => createWOFF2(options)) // TTF => WOFF2 .then(() => createSvgSymbol(options)) // SVG Files => SVG Symboloptionssvgtofont(options)distType: String Default value: distsvg 图标路径srcType: String Default value: svg输出到指定目录fontNameType: String Default value: iconfont您想要的字体名称。unicodeStartType: Number Default value: 10000unicode起始编号clssaNamePrefixType: String Default value: font name创建字体类名称前缀，默认值字体名称。cssType: Boolean Default value: false创建CSS / LESS文件，默认为“true”。svgicons2svgfont这是 svgicons2svgfont 的设置svgicons2svgfont.fontNameType: String Default value: ‘iconfont’您想要的字体名称，与前面 fontName 一样。svgicons2svgfont.fontIdType: String Default value: the options.fontName value你想要的字体ID。svgicons2svgfont.fontStyleType: String Default value: ‘‘你想要的字体样式。svgicons2svgfont.fontWeightType: String Default value: ‘‘你想要的字体粗细。svgicons2svgfont.fixedWidthType: Boolean Default value: false创建最大输入图标宽度的等宽字体。svgicons2svgfont.centerHorizontallyType: Boolean Default value: false计算字形的边界并使其水平居中。svgicons2svgfont.normalizeType: Boolean Default value: false通过将图标缩放到最高图标的高度来标准化图标。svgicons2svgfont.fontHeightType: Number Default value: MAX(icons.height)输出的字体高度（默认为最高输入图标的高度）。svgicons2svgfont.roundType: Number Default value: 10e12设置SVG路径舍入。svgicons2svgfont.descentType: Number Default value: 0字体下降。 自己修复字体基线很有用。警告： 下降是一个正值！svgicons2svgfont.ascentType: Number Default value: fontHeight - descent字体上升。 仅当您知道自己在做什么时才使用此选项。 为您计算一个合适的值。svgicons2svgfont.metadataType: String Default value: undefined字体 metadata。 你可以设置任何字符数据，但它是适合提及版权的地方。svgicons2svgfont.logType: Function Default value: console.log允许您提供自己的日志记录功能。 设置为 function（）{} 禁用日志记录svg2ttf这是 svg2ttf 的设置svg2ttf.copyrightType: String版权字符串svg2ttf.tsType: String用于覆盖创建时间的Unix时间戳（以秒为单位）svg2ttf.versionType: Numberfont version string, can be Version x.y or x.y.website定义预览Web内容。 例：{ … // website = null, no demo html files website: { title: “svgtofont”, logo: path.resolve(process.cwd(), “svg”, “git.svg”), version: pkg.version, meta: { description: “Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.”, keywords: “svgtofont,TTF,EOT,WOFF,WOFF2,SVG”, favicon: “./favicon.png” }, footerLinks: [ { title: “GitHub”, url: “https://github.com/jaywcjlove/svgtofont” }, { title: “Feedback”, url: “https://github.com/jaywcjlove/svgtofont/issues” }, { title: “Font Class”, url: “index.html” }, { title: “Unicode”, url: “unicode.html” } ] }}website.templateType: String Default value: index.ejs自定义模板可自定义参数。 您可以根据默认模板定义自己的模板。{ website: { template: path.join(process.cwd(), “my-template.ejs”) }}website.indexType: String Default value: font-class, Enum{font-class, unicode, symbol}设置默认主页。字体使用假设字体名称定义为 svgtofont，默认主页为unicode，将生成：font-class.htmlindex.htmlsymbol.htmlsvgtofont.csssvgtofont.eotsvgtofont.lesssvgtofont.svgsvgtofont.symbol.svgsvgtofont.ttfsvgtofont.woffsvgtofont.woff2预览demo font-class.html, symbol.html 和 index.html。自动生成样式svgtofont.css 和 svgtofont.less 。symbol svg<svg class=“icon” aria-hidden=“true”> <use xlink:href=“svgtofont.symbol.svg#svgtofont-git”></use></svg>Unicode<style>.iconfont { font-family: “svgtofont-iconfont” !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}</style><span class=“iconfont”>&#59907;</span>Class Name支持.less和.css样式引用。<link rel=“stylesheet” type=“text/css” href=“node_modules/fonts/svgtofont.css”><i class=“svgtofont-apple”></i>LicenseLicensed under the MIT License. ...