字体Logo的施用手续

作者: 产品分类  发布:2020-01-03

一.字体图标的优点

体积小,本质是字体,可以改变颜色,大小,背景等。

二.使用步骤

1.UI人员设置svg格式交给前端人员

2.前端上传svg格式生成兼容性字体文件包

登陆点击右侧IcoMoon App-点击左上角New Empty Set-把SVG文件拖入Unititled Set里面即可

3.下载兼容性字体文件包到本地

如果公司不设置字体图标,第一,第二步跳过了。

选中需要的图标-generate Font-会进入Download页面-Download-本地就有icomoon.zip了,解压之后的demo.html不要删除,可以参考,即使我们只需要用fonts文件夹。

4.把字体文件包引入页面中

4.1.把fonts文件夹复制到项目中。

4.2. 声明

@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal;}

4.3.给盒子使用字体,一定保证和上面的font-family相同

第一种:

span { font-family: "icomoon"; font-size: 100px; color: pink;}

第二种:

div::before { font-family: "icomoon"; /* 一定保证和上面的 font-family: 相同 */ font-size: 100px; color: hotpink; content: "e91b"; }

5.追加字体

把与fonts同级的selection.json通过#/select上传,点击import Icon即可,原来的图标会显示出来,可以追加新的,再下载下来就可以。

本文由全球彩票历史版本发布于产品分类,转载请注明出处:字体Logo的施用手续

关键词: