SVG制作图标字体
程序员文章站
2022-03-31 20:02:18
...
前言:
小伙伴们是不是经常看到如下代码,然后就是一头雾水,这到底是个啥呀,今天我们就一起来研究一下这个问题。
@font-face {
font-family: 'sell-icon';
src: url('../fonts/sell-icon.eot?ze40eg');
src: url('../fonts/sell-icon.eot?ze40eg#iefix') format('embedded-opentype'),
url('../fonts/sell-icon.ttf?ze40eg') format('truetype'),
url('../fonts/sell-icon.woff?ze40eg') format('woff'),
url('../fonts/sell-icon.svg?ze40eg#sell-icon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'sell-icon' !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-add_circle:before {
content: "\e900";
}
.icon-arrow_lift:before {
content: "\e901";
}
.icon-check_circle:before {
content: "\e902";
}
.icon-close:before {
content: "\e903";
}
.icon-favorite:before {
content: "\e904";
}
.icon-keyboard_arrow_right:before {
content: "\e905";
}
.icon-remove_circle_outline:before {
content: "\e906";
}
.icon-shopping_cart:before {
content: "\e907";
}
.icon-thumb_down:before {
content: "\e908";
}
.icon-thumb_up:before {
content: "\e909";
}
图标字体
简介:其实上面是一种常用的套路,把SVG图片制作成图标字体,在页面直接使用Class即可。说到这里,是不是感觉柳暗花明又一村。
下面我们就一起来制作一个图标字体:
1.打开URL: https://icomoon.io/app/#/select
2.导入SVG图片:
3.选中需要制作的图片
4.制作
5.这里可以自定义一些东西
6.然后我们就可以下载了
7.最后我们就可以在项目中使用了,把目录结构参考下载下来的demo,fonts字体必须要引入,icon样式就是style.css
最后,小伙伴们再看到如上代码,是不是觉得so easy了。。。。