字符集图标制作
【摘要】
字符集图标：
将网页上常见的icon做成font（字符集），以字体的方式插入到网页上，作用是减轻服务器负担，减少宽带。
我最常在这两个网站上下载字体图标：
https://icomoon.io/app/#/select
https://www.iconfont.cn/plus
具体使用方法，可以参考字体下载后的示例，比如在icoMoon上我选了两个字体图标...
字符集图标：
将网页上常见的icon做成font（字符集），以字体的方式插入到网页上，作用是减轻服务器负担，减少宽带。
我最常在这两个网站上下载字体图标：
https://icomoon.io/app/#/select
https://www.iconfont.cn/plus
具体使用方法，可以参考字体下载后的示例，比如在icoMoon上我选了两个字体图标，点击下载：
下载的文件解压后，会看到这些东西：
文件虽然很多，但其实大部分是为了展示示例页面的，如果你想将字体引用到自己的项目里，主要就是两步：
第一步，把style.css里字体相关的样式拷贝到自己的样式表里：
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?hwh5d3'); src: url('fonts/icomoon.eot?hwh5d3#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?hwh5d3') format('truetype'), url('fonts/icomoon.woff?hwh5d3') format('woff'), url('fonts/icomoon.svg?hwh5d3#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-headphones:before { content: "\e910"; } .icon-music:before { content: "\e911"; }
第二步，在需要使用字体的地方加上类名，如：
<span class="icon-headphones"></span>
然后别忘了在该html中，引入你添加了字体的样式表就可以啦~
文章来源: www.cnblogs.com，作者：姜腾腾，版权归原作者所有，如需转载，请联系作者。
原文链接：www.cnblogs.com/jiangtengteng/p/5434998.html
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）