博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用svg制作字体图标
阅读量:6548 次
发布时间:2019-06-24

本文共 1090 字,大约阅读时间需要 3 分钟。

###1.访问链接转换svg字体的网站 https://icomoon.io/

###2.导入SVG图标


###3.选中你要转换的SVG图标



###4.设置信息 设置icon名称以及相关信息


生成例子以及相关样式代码:

####5.主要是生成的css文件 style.css

@font-face {  font-family: 'icomoon';  src:  url('fonts/icomoon.eot?xhzg4r');  src:  url('fonts/icomoon.eot?xhzg4r#iefix') format('embedded-opentype'),    url('fonts/icomoon.ttf?xhzg4r') format('truetype'),    url('fonts/icomoon.woff?xhzg4r') format('woff'),    url('fonts/icomoon.svg?xhzg4r#icomoon') format('svg');  font-weight: normal;  font-style: normal;}[class^="icon-"], [class*=" icon-"] {  /* use !important to prevent issues with browser extensions that change fonts */  font-family: 'icomoon' !important;  speak: none;  font-style: normal;  font-weight: normal;  font-variant: normal;  text-transform: none;  line-height: 1;  /* Better Font Rendering =========== */  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;}.icon-appicon:before {  content: "\e902";}复制代码

把生成的fonts里面的所有文件拷贝到你需要的开发环境


###6.实际调用 只需要给相关的类名即可以,类名就是之前生成的时候你编写的名字前面加上icon-,如果没有改,就是你svg文件的名字。

复制代码

转载于:https://juejin.im/post/5a32129d6fb9a044fc44c186

你可能感兴趣的文章
rpc远程调用开发
查看>>
复习-css控制文本字体属性
查看>>
学习设计模式——观察者模式
查看>>
什么是centos 的epel源
查看>>
删除LVM步骤
查看>>
Zookeeper客户端
查看>>
linux常用指令
查看>>
Servlet Demo
查看>>
Struts2中的<s:action>标签
查看>>
Java中取某一个范围的随机数
查看>>
一条复杂SQL实现思路
查看>>
我的友情链接
查看>>
android app 退出时提示确认
查看>>
win10 配置
查看>>
java 编译100个范例
查看>>
Session Cookie ServletContext
查看>>
单点登录SSO
查看>>
遇见有的软件开启后画面模糊怎么解决
查看>>
好系统重装助手教你怎么识别固态硬盘还是机械硬盘
查看>>
170. js中获取随机数 (记录一下)
查看>>