因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库。
先介绍下阿里巴巴矢量图标库iconfont:
这个截图只显示了第一行的图标库,还有很多。
也许,我们需要的,这里都有。
有一点比较遗憾的是,不能直接下载图标库,只能一个个的添加入库(放入购物车,不花钱),加入项目(或新建项目并将入库的小图标加入项目),然后配置下载。
配置的主要是项目名称和图标前缀。
看一下上图所示的项目界面,其中font class和symbol显示的就是图标的英文名,unicode显示的就是:
(我们使用的是font class)
图中,更多操作里面有编辑项目:
其中项目名称和前缀配置一下,保存,然后下载至本地。解压后可以将所有文件复制粘贴到项目的/src/assets/myicon下,这个自己创建一个就好了,到时候引用css文件时知道自己把文件放哪了,会引用就可以。
比如,我的目录结构:
我在登陆的vue中引用图标css文件:
我在账号、密码的input处使用了:
但是,显示的不是小人和锁头,而是:
其他图标则显示为小方框。
那么,现在开始解决这个问题。经过在网上苦苦寻觅,却不能得到满意的答案后,我发现了:
在下载的图标库中有demo.css和demo_index.html
用浏览器打开demo_index.html图标是可以正常显示的,也就是说我们这里有一个正确配置和使用图标库的例子了。
而且其中还介绍了三种方式如何引入和使用图标库,其中font-class引用步骤如下:
下面,介绍下demo.css与demo_index.html这两个文件。(demo_index.html中使用font-class方式引用图标库,但使用方法和上图所述并不完全相同。)
(提示:代码粘出来了,但没必要全看,看自己的就好了,知道图标是怎么配置,怎么使用的就可以了)
demo.css(与demo_index.html样式有关,但是与其中图标的使用没什么关系)代码:
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
...
demo_index.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont Demo</title>
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1155556" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">密码</div>
<div class="code-name">&#xe63e;</div>
</li>
<li class="dib">
<span class="icon iconfont"></span>
<div class="name">账号</div>
<div class="code-name">&#xe634;</div>
</li>
...
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>兼容性最好,支持 IE6+,及所有现代浏览器。</li>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
><span class="iconfont">&#x33;</span>
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont el-icon-qianniu-password"></span>
<div class="name">
密码
</div>
<div class="code-name">.el-icon-qianniu-password
</div>
</li>
<li class="dib">
<span class="icon iconfont el-icon-qianniu-account"></span>
<div class="name">
账号
</div>
<div class="code-name">.el-icon-qianniu-account
</div>
</li>
...
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>兼容性良好,支持 IE8+,及所有现代浏览器。</li>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
<li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html"><span class="iconfont el-icon-qianniu-xxx"></span>
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-icon-qianniu-password"></use>
</svg>
<div class="name">密码</div>
<div class="code-name">#el-icon-qianniu-password</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#el-icon-qianniu-account"></use>
</svg>
<div class="name">账号</div>
<div class="code-name">#el-icon-qianniu-account</div>
</li>
...
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html"><script src="./iconfont.js"></script>
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html"><style>
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>
vue项目的index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>xx系统</title>
<link rel="stylesheet" href="./src/assets/myicon/iconfont.css">
<script src="./src/assets/myicon/iconfont.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
不过在index.html中引用好像没什么用。
需要在main.js中引用(iconfont.css和iconfont.js,在demo_index.html中引入的不止这两个文件,但是其他的都与图标无关,之前网上的文章都是引入iconfont.css即可,但是我这样做后就显示不正常。):
//引入阿里巴巴图标库
import './assets/myicon/iconfont.css'
import './assets/myicon/iconfont.js'
而且,虽然仍然可以使用prefix-icon但是,不能只是写el-icon-qianniu-account ,前面要加上icon iconfont,这也是demo_index.html中的写法,登录几界面,相关代码如下:
<el-form-item prop="username" style="text-align: left">
用户名:
<el-input prefix-icon="icon iconfont el-icon-qianniu-account" type="text" v-model="loginForm.username"
auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password" style="text-align: left">
密码:
<el-input prefix-icon="icon iconfont el-icon-qianniu-password" type="password" v-model="loginForm.password"
auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
现在成功了:
总结:
开始我一直在网上搜索“如何使用阿里巴巴图标库”、“阿里巴巴图标库 显示异常 小方框”等,找到了一些文章,但是都不能解决我的问题,甚至想过要找前端工作流程、工作机制、图标使用的原理啥的,无果,所以最终放弃继续在网上找,寻思想想别的方法,就在这时,我注意到了demo.css和demo_index.html,虽然,我早就知道这两个文件的存在,以及它们是例子,但是却一直忽视了它们,直到我想找别的方法时,才想要看看这两个文件里面有什么,html文件打开是什么样的。
这两个文件算是一手资料了,网上找的文章,对于我们而言,是二手资料,有的时候不能很好的解决我们的问题(虽然很多时候,这些二手资料要比一手资料好用),所以我们就要想想怎么找到并利用一手资料。