在开发过程中,可能会经常遇到这个问题,给所做的项目添加icon图标。尤其是在需要做菜单、导航等组件的时候,加上icon图标,则会显得ui不会那么死板。
  像这种图标,如果是量少且需要比较好看或者比较复杂的,一般可以在iconfont上直接下载对应的png,或者自己制作后,进行压缩处理导出为png格式;如果是其他情况,

  • 如果ui有采用框架的话,能使用框架带的icon就尽量使用,etc: element-ui所带的el-icon
  • 如果不是的话,可以考虑使用fontawesome,比起iconfont比较易于使用,虽然图标可能不是那么全,网站在此:Font Awesome中文网
  • 最后,如果需要图标较多,且大多在上面情况没有的话,则得采取用iconfont,把自己需要的图标添加到项目中,再把配置文件下载下来引用到项目里即可。

一、ui框架自带的——element ui

1. 引入ui框架

  以element ui框架为例,在项目下采用此命令安装,快速上手的方法官方文档已有提供,点击进入

npm i element-ui -S

2. 使用icon

  在前面的步骤完成后,在需要的地方就可以添加i标签引用框架带的icon图标了,具体有哪些图标可参考这里

<!--举例如下-->
<!--通过style再去调颜色和大小等等-->
<i class="el-icon-s-order"></i>

二、Font Awesome

1. 从Font Awesome上下载

  首先,是进入Font Awesome中文网,下载配置文件的压缩包,v5版需要收费,如果是必须的话才采用v5,否则旧版v4.7一般就是够用了。

2. 引入相关文件

  下载下来后,

  • 将压缩包中的font文件夹整个移到项目下的style放样式文件的文件夹下
  • 再将css文件夹下的font-awesome.min.css或者font-awesome.css两个文件移到style文件夹中
  • 确保font-awesome.*.css中font-face下的那几个文件路径正确,并在总体scss/less/css中用@import "font-awesome.*.css"引入即可使用

3. icon使用

  有了前面几步操作后,就可以使用Font-awesome下的图标了,需要的时候,上到图标库上查找即可

<!--举例如下-->
<!--fa是必须写的class,后面的fa-*是代表对应的图标-->
<i class="fa fa-address-card-o" aria-hidden="true"></i>

  本站采用的就是Font-awesome的图标库,举例子如下,分别是微博和facebook的对应icon图标。

三、Iconfont

1. 登录Iconfont

  非阿里员工只能使用Github账户或者微博账号登录,这边用哪个登录都行,用微博登录也不会让你关注啥和发啥内容的。

2. 新建项目添加图标

  • 登录后,进入图标管理页面,在这里新建一个项目,PS:这里的项目不是你参与开发的项目,而是你用来放图标的项目。
  • 建立好项目后,就可以开始准备添加图标到我们的项目中来。
    • 第一步,在Iconfont中搜索图标
    • 第二步,看到满意的图标后可以添加入购物车
    • 第三步,在购物车中进行筛选,喜欢的可以添加至项目,不喜欢的也可以移除

3. 下载至本地

  • 点击按钮下载至本地,会下载一个名为download.zip的压缩包
  • 解压这个压缩包
  • 将解压出来的文件夹中,提取四个重要文件到需引用的项目中,即iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff到style文件夹下,可考虑在其下建立一个名为iconfont的文件夹进行放置,方便处理
  • 移动iconfont.css到项目style文件夹下,确保上方四个文件的路径正确
  • 修改icon的class名,这一步可有可无,视个人和项目具体情况而定

4. 引入项目使用

  这一步同Font-awesome的第2步操作,唯一不同的是,在iconfont.css文件中,需要保证几个相关文件路径正确,否则会报错。
  以及如果有必要的话,更改配置图标的命名,因为下载下来的配置都是用的拼音,气死英语不好的人...

//举例如下
//比如历史数据这一图标
//下载下来后是这样的
.iconlishishuju:before{
    content: "\e69e";
}
//强迫症或者追求意思贴近的可以考虑改成
.icon-history:before {
     content: "\e69e";
}

//以上只是个人看法

  Iconfont比较扯淡的一点就是,如果你在图标项目里新引入一个图标,那么你要使用这个图标,需要重新进行步骤三,所以一般是同一个图标选择多几个相关类型的,到时候不用这么麻烦;
  或者是,把iconfont.css中已经配置好的部分先保存起来,重新进行第三步后,只需修改新添加的图标的英文,旧的可直接复制黏贴。