项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)

思路：

1、找到你需要的阿里巴巴字体图标，添加到公司字体图标阿里巴巴库，----> 刷新该icon所在的阿里巴巴css文件在线链接

2、在项目中新建一个字体图标css文件 inconfont.scss （项目用的是Sass编译），引入阿里巴巴css文件在线链接，

3、全局样式引入刚新建的字体图标css文件

4、copy到该icon代码，在使用页面使用该代码作为i标签的class名

详细说明：

用公司给的阿里巴巴账号登录阿里巴巴 https://www.iconfont.cn，

搜索查找到需要的字体图标：如：货车图标

点击更新代码：获得阿里巴巴在线css文件，copy该文件链接到项目中：

到项目中：找到全局样式管理文件： styles / index.scss ,在同级位置新建一个icon样式文件inconfont.scss,如下：（将先前在阿里巴巴获得的css文件地址拷贝到此）

在全局样式文件index.scss里面引入该icon文件 iconfont.scss:

在入口文件main.js里面引入全局样式文件：

import ‘@、styles/index.scss’ // global css

回到阿里巴巴项目中找到你要的图标下面的icon代码：copy 到你需要使用的页面：

如：

icon-huabanfuben

效果如下:

===================================

彩色图标

1、拷贝svg项目下生产的symbol代码： + icon代码

在项目 index.html里面引入该阿里巴巴symbol在线js文件

<script src="//at.alicdn.com/t/font_1020172_heufpqu3jhn.js"></script>

2、加入通用css代码（引入一次即可）

// 彩色 svg 通用css样式
.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill:currentColor;overflow: hidden;
}

// 彩色 svg 通用css样式
.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill:currentColor;overflow: hidden;
}

在使用的页面 使用 icon代码（注意：前面加 #）

效果如下：

项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)相关推荐

vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
如何将一个完整项目推到码云_怎么将本地项目放到码云(gitee)上面?图文详解
原标题:怎么将本地项目放到码云(gitee)上面?图文详解 git的好处什么的,在此就不多赘述.现在很多公司都在用git了. 那么怎么将本地已经有的项目放到码云(gitee)上呢? 前置条件说明: 1 ...
发布个人项目jar包到maven中央仓库详解
发布个人项目jar包到maven中央仓库详解 1.在sonatype提交发布工单(Issue) sonatype是由社区支持的开源项目托管服务(Open Source Project Reposito ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
xp如何添加桌面计算机回收站,详解桌面回收站图标在XP电脑中操作删除的详细步骤...
我们在电脑的很多的设置中,很多的用户都是可以打开不同的版本来设置电脑的问题的,对于电脑的回收站图标的设置有的小伙伴不是很喜欢使用桌面的这个图标怎么直接删除回收站图标的呢,今天小编就来跟大家分享一下XP ...
jQuery数组处理详解(含实例演示)
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档中对数组的 ...
Zabbix+MatrixDB大规模监控与分析解决方案详解(含PPT)
首先,谢谢原作者:(此文为转载的文章,现将原地址贴出如下:以下文章来源于yMatrix,作者MatrixDB团队Zabbix+MatrixDB大规模监控与分析解决方案详解(含PPT)) 更多精彩Zab ...
c fread 快读详解_梨的简笔画画法教程详解【彩色】__水果_水果简笔画图片_学画画网...
2020-10-20 11:43:58 来源:简笔画教程作者: 小西导读: 美味的梨的简笔画怎么画?梨的简单的画法教程,手把手的教你画梨的简笔画,喜欢就跟着教程一起来学吧. 梨的简笔画画法教程详解 ...

项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)

项目oms之----阿里巴巴字体图标运用详解 (含：彩色图标svg运用)相关推荐

最新文章

热门文章