字体图标在线扩展篇(2020.02.28):https://www.cnblogs.com/cisum/p/12366203.html

【iconfont下载】

https://www.iconfont.cn/search/index?searchType=icon&q=%E4%B8%8A%E4%BC%A0

可能报错,找不到线上图标 ,每段url添加上:

//at.alicdn.com/t/

  

【iconfont分类】

字体图标(iconfont)有在线和离线 (在线和离线并没有什么明显区别,如果为了稳定性可以使用离线图标,方便性的话就生成在线图标)

【什么是在线图标和本地图标】

在线图标

@font-face {
font-family: 'iconfont'; /* project id 1271859 */
src: url('//at.alicdn.com/t/font_1271859_qalxwy6vi7g.eot');
src: url('//at.alicdn.com/t/font_1271859_qalxwy6vi7g.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1271859_qalxwy6vi7g.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1271859_qalxwy6vi7g.woff') format('woff'),
url('//at.alicdn.com/t/font_1271859_qalxwy6vi7g.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1271859_qalxwy6vi7g.svg#iconfont') format('svg');
}

离线图标

@font-face {
font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMYAAsAAAAABvQAAALLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBWIFXATYCJAMMCwgABCAFhG0HPBsjBhHVk2tkfyzuGITwb0EiVKIoEejZbZ7bBUW+SJXTSEJWpj1XvfrHorw0QtIi/H5HPPz/ft/2Off+NyrJFIkk80pSTSSI7qlNiLA6rO5RLLQRDzjZIopl1qQASECeiWYAAarXC129/HrAjlX5/F/uxvO5SQ7PDv+gG7sCSUtLl4aLLL7b2sAAgw04gmTSIUAb+Tb6SqO2bRr2MeYjVJfs+b7fmpEAXeHS/GoCCkFWbWAyNMaAy+n/V0CBzAPKZY6tYwImGOgeGAUScIGUIDeM3UTwAG8T6DRhs9hPAIh2FVgUiKvVKdFeCKuqk2sXmoadVbzV0p7P8oOBN/zz8dcw2kmtAqw8fMUviN0/jEtb5xQlSJZzwtlHwWZU4kxj+pgiHGbRqa7dpY0q5FKx/zoXx8oG/uGRgmiA6m6wZGSSH2BxplGXPvUvC2hQsRUXF3gpUnaP0dz4Bdo37L+4+4RHXXcyuh9y3yr4efJjL8HXubeNCFzXob7HbQubJi4QgLXr7ie0foJGCJFnTUPLO+vzB5RPQa1lpZFY3xUr16CACok8O3Fgem+C/ubVBVNg/T1T20/+jtdnDsp8OxV8qhjfsX63KnfRLhks+aWSgQM1lgFLqaEYi1NvsTTRmehC12cd8A/6Pl0/ctvZ0G4kQ2ozjqLdHFkZm9HSZQsa7Xah0yaH9ncZck0RtQMbPdIQ+i0j9XqHot9HsjK+oWXUfzT6o6DTkejELqiRTdApRvB/KIF3Qja1ovaK6b06ycs464lylBj0TVfOXXBHWWLN8UmDKgEJbzBp9+G6MlThGYM2WbWObUtNT2oCb8ZK0ClG4P+gBN6Jjldbef8V03t10tEy4n+iHGVy0Gt0A8iLeh/U8iiPHJ80UCVAwhuYNCeuMM2gNk+bMWgjT0jWUWuMoqHqZnvt9gNFTgfgVJFRouJ6Lt6V0xn3lBibjAEA') format('woff2');
} .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-shibai:before {
content: "\e645";
} .icon-chenggong:before {
content: "\e61b";
}

  

【字体可以进行重命名,避免被全局iconfont所影响】

@font-face {
font-family: "iconfont";
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMYAAsAAAAABvQAAALLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBWIFXATYCJAMMCwgABCAFhG0HPBsjBhHVk2tkfyzuGITwb0EiVKIoEejZbZ7bBUW+SJXTSEJWpj1XvfrHorw0QtIi/H5HPPz/ft/2Off+NyrJFIkk80pSTSSI7qlNiLA6rO5RLLQRDzjZIopl1qQASECeiWYAAarXC129/HrAjlX5/F/uxvO5SQ7PDv+gG7sCSUtLl4aLLL7b2sAAgw04gmTSIUAb+Tb6SqO2bRr2MeYjVJfs+b7fmpEAXeHS/GoCCkFWbWAyNMaAy+n/V0CBzAPKZY6tYwImGOgeGAUScIGUIDeM3UTwAG8T6DRhs9hPAIh2FVgUiKvVKdFeCKuqk2sXmoadVbzV0p7P8oOBN/zz8dcw2kmtAqw8fMUviN0/jEtb5xQlSJZzwtlHwWZU4kxj+pgiHGbRqa7dpY0q5FKx/zoXx8oG/uGRgmiA6m6wZGSSH2BxplGXPvUvC2hQsRUXF3gpUnaP0dz4Bdo37L+4+4RHXXcyuh9y3yr4efJjL8HXubeNCFzXob7HbQubJi4QgLXr7ie0foJGCJFnTUPLO+vzB5RPQa1lpZFY3xUr16CACok8O3Fgem+C/ubVBVNg/T1T20/+jtdnDsp8OxV8qhjfsX63KnfRLhks+aWSgQM1lgFLqaEYi1NvsTTRmehC12cd8A/6Pl0/ctvZ0G4kQ2ozjqLdHFkZm9HSZQsa7Xah0yaH9ncZck0RtQMbPdIQ+i0j9XqHot9HsjK+oWXUfzT6o6DTkejELqiRTdApRvB/KIF3Qja1ovaK6b06ycs464lylBj0TVfOXXBHWWLN8UmDKgEJbzBp9+G6MlThGYM2WbWObUtNT2oCb8ZK0ClG4P+gBN6Jjldbef8V03t10tEy4n+iHGVy0Gt0A8iLeh/U8iiPHJ80UCVAwhuYNCeuMM2gNk+bMWgjT0jWUWuMoqHqZnvt9gNFTgfgVJFRouJ6Lt6V0xn3lBibjAEA') format('woff2');
} .iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .icon-shibai:before {
content: "\e645";
} .icon-chenggong:before {
content: "\e61b";
}

【字体图标太多,势必会影响速度】 -> 新建项目,可以求助于原开发者加入项目

uniapp - 阿里图库字体图标使用的更多相关文章

  1. 在webstorm开发微信小程序之使用阿里自定义字体图标

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. ...

  2. uni-app引入iconfont字体图标

    1 首先进入你的iconfont项目 很好, 看见圈圈的吗 , 我说蓝色的,记住了,选到这个 ,然后点击下载本地项目, 解压完就是这个了 ,然后把 圈起来的放到你的项目文件里面 ,记得引入的时候路径别 ...

  3. vue引入iconfont阿里字体图标库以及报错解决

    下载阿里的字体图标库文件,放在\src\assets\font文件夹下面. 安装style-loader,css-loader和file-loader (或url-loader)  ,记得--save ...

  4. 第104天:web字体图标使用方法

    字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 一.阿里库字体图标使用 第一步: 首先进入阿里巴巴矢 ...

  5. uni-app在线引入阿里字体图标库

    第一步 在app.vue中引入阿里字体图标库 第二步 在任意页面使用就可以了 <view class="item" v-for="(value,index) in ...

  6. 00字体图标iconfont的制作与使用--阿里矢量图库

    一.iconfont的使用范围 在工作当中,经常会用到嵌在元素里的小图标 在这种情况下,如果使用<img>标签或者用作背景图片,也能实现这种效果.但是如果这么做的话,就必须把图片一个个切下 ...

  7. 微信小程序中使用阿里字体图标

    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现. 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标. 下载图标 首先在阿里字体图标查找 ...

  8. iconfont阿里字体图标的使用方法

    我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...

  9. 如何在微信小程序中使用阿里字体图标

    第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标. 如这里需要一个购物车的图标,流程为: 搜索“购物车”图标 --->  点击“添加入库”  ...

随机推荐

  1. 企业如何避免错误决策?APS系统帮你忙

    一家企业不论什么事情都是有一定的决策者们,企业的决策者是对整个企业的兴衰成败主宰者主要责任. 战略一词它源于军事,是指为了获得有利的信息而进行的部署计划,那么现在战略合作也是被广泛的应用到商业的以及生 ...

  2. insmod/rmmod

    insmod -f 不检查目前kernel版本与模块编译时的kernel版本是否一致,强制将模块载入 -k 将模块设置为自动卸除 -m 输出模块的载入信息 -o <模块名称> 指定模块的名 ...

  3. React-Native中使用到的一些JS特性

    React Native - 调试技巧及调试菜单说明(模拟器调试.真机调试) https://www.hangge.com/blog/cache/detail_1480.html 1,解构赋值——de ...

  4. CNN原理

    卷积神经网络(Convolutional Neural Network)的结构类似于神经网络,可以看做是对其的改进.它利用局部连接.权值共享.多核卷积.池化四个手段大大降低了参数的数目,使得网络的层数 ...

  5. Swagger Liunx环境搭建(亲测百分百可用)

    一.安装nodejs 下载编译好的nodejs安装包,下载地址: https://nodejs.org/dist/v10.10.0/ (作者下载的10.10.0,可根据自己需要下载不同版本) 将下载好 ...

  6. golang错误处理

    1. 错误 错误用内建的error类型来表示. type error interface { Error() string } error 有了一个签名为 Error() string 的方法.所有实 ...

  7. SHELL脚本编程-字符串处理

    SHELL脚本编程-字符串处理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.字符串切片 [root@node101.yinzhengjie.org.cn ~]# echo { ...

  8. 如何更改scratch3.0的文字

    首先,我们来看以下的图,我们需要更改scratch3.0的文字,例如文件,新作品,从电脑上传等文字. 打开源码,目录src/compents/menu-bar/menu-bar.jsx 大家会发现,所 ...

  9. c++的boost库

    c++ 的boost库的理解? 参考:http://zh.highscore.de/cpp/boost/introduction.html https://www.cnblogs.com/lidabo ...

  10. Pycharm 切换Git 远程分支

    1.git 仓库新建远程分支以后,pycharm 本地没有办法查看到对应的分支,需要切换到本地代码的git所在的目录执行下"git remote update origin --prune” ...