IconFont
2020-06-02 本文已影响0人
沈念一
1、传统图标（Sprite 雪碧图）css Sprite
优点：减少http请求次数，使页面加载速度更快，提高网页性能
<template>
<div class='iconfont'>
<div class="bgImg help"></div>
</div>
</template>
<script>
export default {
name: 'iconfont'
}
</script>
<style lang='scss' scoped>
.iconfont {
.bgImg {
background:url(img/logs.png);
display:block; //使用此属性后，图片不会与文字并排，图片单独占一行
text-indent: -9999px; //缩进
overflow: hidden;
background-repeat: no-repeat;
width: 16px;
height: 16px;
}
.help {
background-position: -48px -150px;
}
}
</style>
2、字体图标官网
svg矢量图库官网：
位图：图像细腻，但占用空间大，且放大失真
字体图标：占用空间小，可随意放大
3、icomoon
- font+html（unicode编码方式）
-
登录网站选择图标
image.png
- 选择右下角生成字体（Generate Font）
-
进入预览界面，预览并下载图标库文件（可改名）.zip
image.png
- 选择右下角生成字体（Generate Font）
-
解压，并copy（fonts文件夹、style.css）,demo.html用于查看示例
image.png
-
在css文件夹下粘贴fonts和style.css
image.png
- 在项目中使用，凡是可以放文字的标签都可以实现（div span等）
style.css中有：
[class^="icon-"], [class*=" icon-"] {}
icomoon.svg中有：
<glyph unicode=" " horiz-adv-x="512" d="" />
<glyph unicode="" glyph-name="play_rename" d="M981.188 799.892c-143.632 20.65-302.332 32.108-469.186 32.108-166.86 0-325.556-11.458-469.194-32.108-27.53-107.726-42.808-226.75-42.808-351.892 0-125.14 15.278-244.166 42.808-351.89 143.638-20.652 302.336-32.11 469.194-32.11 166.854 0 325.552 11.458 469.186 32.11 27.532 107.724 42.812 226.75 42.812 351.89 0 125.142-15.28 244.166-42.812 351.892zM384.002 256v384l320-192-320-192z" />
<glyph unicode="" glyph-name="film" d="M0 832v-768h1024v768h-1024zM192 128h-128v128h128v-128zM192 384h-128v128h128v-128zM192 640h-128v128h128v-128zM768 128h-512v640h512v-640zM960 128h-128v128h128v-128zM960 384h-128v128h128v-128zM960 640h-128v128h128v-128zM384 640v-384l256 192z" />
<glyph unicode="" glyph-name="video-camera" d="M384 672c0 88.366 71.634 160 160 160s160-71.634 160-160c0-88.366-71.634-160-160-160s-160 71.634-160 160zM0 672c0 88.366 71.634 160 160 160s160-71.634 160-160c0-88.366-71.634-160-160-160s-160 71.634-160 160zM768 352v96c0 35.2-28.8 64-64 64h-640c-35.2 0-64-28.8-64-64v-320c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64v96l256-160v448l-256-160zM640 192h-512v192h512v-192z" />
<glyph unicode="" glyph-name="file-play" d="M384 576l320-224-320-224v448zM917.806 730.924c-22.212 30.292-53.174 65.7-87.178 99.704s-69.412 64.964-99.704 87.178c-51.574 37.82-76.592 42.194-90.924 42.194h-496c-44.112 0-80-35.888-80-80v-864c0-44.112 35.888-80 80-80h736c44.112 0 80 35.888 80 80v624c0 14.332-4.372 39.35-42.194 90.924zM785.374 785.374c30.7-30.7 54.8-58.398 72.58-81.374h-153.954v153.946c22.984-17.78 50.678-41.878 81.374-72.572zM896 16c0-8.672-7.328-16-16-16h-736c-8.672 0-16 7.328-16 16v864c0 8.672 7.328 16 16 16 0 0 495.956 0.002 496 0v-224c0-17.672 14.326-32 32-32h224v-624z" />
<glyph unicode="" glyph-name="coin-dollar" d="M480 896c-265.096 0-480-214.904-480-480 0-265.098 214.904-480 480-480 265.098 0 480 214.902 480 480 0 265.096-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.078 0 384-171.922 384-384s-171.922-384-384-384zM512 448v128h128v64h-128v64h-64v-64h-128v-256h128v-128h-128v-64h128v-64h64v64h128.002l-0.002 256h-128zM448 448h-64v128h64v-128zM576.002 256h-64.002v128h64.002v-128z" />
<glyph unicode="" glyph-name="coin-euro" d="M480 896c-265.096 0-480-214.904-480-480s214.904-480 480-480c265.098 0 480 214.902 480 480s-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.076 0 384-171.922 384-384s-171.924-384-384-384zM670.824 315.66c-15.27 8.884-34.862 3.708-43.75-11.57-17.256-29.662-49.088-48.090-83.074-48.090h-128c-41.716 0-77.286 26.754-90.496 64h154.496c17.672 0 32 14.326 32 32s-14.328 32-32 32h-160v64h160c17.672 0 32 14.328 32 32s-14.328 32-32 32h-154.496c13.21 37.246 48.78 64 90.496 64h128c33.986 0 65.818-18.426 83.074-48.090 8.888-15.276 28.478-20.456 43.752-11.568 15.276 8.888 20.456 28.476 11.568 43.752-28.672 49.288-81.702 79.906-138.394 79.906h-128c-77.268 0-141.914-55.056-156.78-128h-35.22c-17.672 0-32-14.328-32-32s14.328-32 32-32h32v-64h-32c-17.672 0-32-14.326-32-32s14.328-32 32-32h35.22c14.866-72.944 79.512-128 156.78-128h128c56.692 0 109.72 30.62 138.394 79.91 8.888 15.276 3.708 34.864-11.57 43.75z" />
<glyph unicode="" glyph-name="coin-pound" d="M480 896c-265.096 0-480-214.904-480-480s214.904-480 480-480c265.098 0 480 214.902 480 480s-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.074 0 384-171.922 384-384s-171.926-384-384-384zM608 256h-224v128h96c17.672 0 32 14.326 32 32s-14.328 32-32 32h-96v32c0 52.934 43.066 96 96 96 34.17 0 66.042-18.404 83.18-48.030 8.85-15.298 28.426-20.526 43.722-11.676 15.296 8.848 20.526 28.424 11.676 43.722-28.538 49.336-81.638 79.984-138.578 79.984-88.224 0-160-71.776-160-160v-32h-32c-17.672 0-32-14.326-32-32s14.328-32 32-32h32v-192h288c17.674 0 32 14.326 32 32s-14.326 32-32 32z" />
<glyph unicode="" glyph-name="coin-yen" d="M480 896c-265.096 0-480-214.904-480-480s214.904-480 480-480c265.098 0 480 214.902 480 480s-214.902 480-480 480zM480 32c-212.078 0-384 171.922-384 384s171.922 384 384 384c212.076 0 384-171.922 384-384s-171.924-384-384-384zM608 384c17.674 0 32 14.326 32 32s-14.326 32-32 32h-68.208l94.832 142.25c9.804 14.704 5.83 34.572-8.876 44.376-14.704 9.802-34.572 5.83-44.376-8.876l-101.372-152.062-101.374 152.062c-9.804 14.706-29.672 18.68-44.376 8.876-14.706-9.804-18.678-29.672-8.876-44.376l94.834-142.25h-68.208c-17.672 0-32-14.326-32-32s14.328-32 32-32h96v-64h-96c-17.672 0-32-14.326-32-32s14.328-32 32-32h96v-96c0-17.674 14.328-32 32-32s32 14.326 32 32v96h96c17.674 0 32 14.326 32 32s-14.326 32-32 32h-96v64h96z" />
在main.js中引用：
注意：要用npm install css-loader -s安装
import "../src/assets/css/style.css"
在.vue中使用：
<div class='icomoon'>
<span class="icon-"></span>
</div>
示例图
删除style.css
@font-face
font-weight: normal;
font-style: normal;
- font+css（推荐）
- 下载方式和上边相同
- 使用style.css中的
.icon-film:before {
content: "\e913";
}
.icon-video-camera:before {
content: "\e914";
}
.icon-file-play:before {
content: "\e929";
}
- 在html中使用
<span class="icon-film"></span>
image.png
3、阿里图标（推荐）
- font+html（unicode编码方式）
-
登录网站>创建项目>选择图标>添加进购物车>添加进项目>下载代码
image.png
- 解压并copy（除了示例代码demo.css和demo_index.html）文件
- 根据iconfont.svg中的代码
<glyph glyph-name="shoucang" unicode="" d="M486.4 115.2c16 6.4 35.2 6.4 54.4 0l217.6-99.2-28.8 236.8c-3.2 19.2 3.2 38.4 16 51.2l163.2 176-233.6 48c-19.2 3.2-35.2 16-41.6 32l-118.4 208-118.4-208c-9.6-16-25.6-28.8-41.6-32l-233.6-48 163.2-176c12.8-12.8 19.2-32 16-51.2l-28.8-236.8 214.4 99.2z m-192-156.8c-32-16-70.4 0-86.4 32-6.4 9.6-6.4 22.4-6.4 35.2l28.8 236.8-163.2 176c-22.4 25.6-22.4 67.2 3.2 89.6 9.6 6.4 19.2 12.8 32 16l233.6 48 118.4 208c16 32 57.6 41.6 86.4 25.6 9.6-6.4 19.2-12.8 25.6-25.6l118.4-208 233.6-48c35.2-6.4 57.6-41.6 51.2-76.8-3.2-12.8-6.4-22.4-16-32l-163.2-176 28.8-236.8c3.2-35.2-22.4-67.2-57.6-70.4-12.8 0-22.4 0-35.2 6.4l-217.6 99.2-214.4-99.2z" horiz-adv-x="1024" />
<glyph glyph-name="shoucang1" unicode="" d="M1003.52 505.173333c-6.826667 20.48-23.893333 34.133333-44.373333 37.546667l-273.066667 42.666667L563.2 846.506667C554.666667 866.986667 534.186667 878.933333 512 878.933333s-40.96-11.946667-51.2-32.426666l-122.88-261.12-273.066667-40.96c-20.48-3.413333-37.546667-17.066667-44.373333-37.546667-6.826667-20.48-1.706667-42.666667 13.653333-56.32l199.68-204.8L186.026667-42.666667c-3.413333-20.48 5.12-42.666667 23.893333-54.613333 17.066667-11.946667 40.96-13.653333 59.733333-3.413333L512 30.72l244.053333-136.533333c8.533333-3.413333 17.066667-6.826667 25.6-6.826667 30.72 0 56.32 25.6 56.32 56.32 0 6.826667-1.706667 11.946667-3.413333 17.066667l-44.373333 279.893333 199.68 204.8c15.36 17.066667 20.48 39.253333 13.653333 59.733333z" horiz-adv-x="1024" />
<glyph glyph-name="wode" unicode="" d="M297.3 610.9c0-120.8 97.9-218.7 218.7-218.7 120.8 0 218.7 97.9 218.7 218.7 0 120.8-97.9 218.7-218.7 218.7-120.8 0.1-218.7-97.9-218.7-218.7z m0 0M935.2 184.20000000000005C920.3 296.5 842.4 399.3 740.1 415H695c-37.9-61.7-105.5-103.2-183.3-103.2-77.8 0-145.4 41.5-183.4 103.2h-44.7c-90.1-15.7-179.3-113.3-194.2-225.7C87.5 179.70000000000005 73 70 73.2 65.20000000000005c0.7-46.1 28.2-85.6 67-107.5 20.1-11.6 43-18.7 67-18.7h609.2c24 0 46.9 7.2 67 18.7 38.8 22 66.4 61.5 67 107.5 0.3 4.9-13.3 109.5-15.2 119z m0 0" horiz-adv-x="1024" />
- 在html中使用
<span class="iconfont"></span>
- font+css
- 根据iconfont.css中的
.icon-shoucang:before {
content: "\e78c";
}
- 在html中使用
<span class="iconfont icon-wode1"></span>
