iconfont如何赚钱

iconfont如何赚钱如下，iconfont创建于2013年，是阿里妈妈MUX（淘宝（中国）软件有限公司）打造的矢量图标管理、交流平台，主要提供矢量图标/插画的下载、在线存储、格式转换等服务，现支持AI、SVG、PNG、代码格式的下载，及按路径改变icon颜色，也可将图标转换为字体，以便于前端工程师的自由调整与调用，该网站现已收录有近900多套的图标、600余套的插画内容，其公司旗下现还运营有“躺平、微海报、泊鹄搭建”等网站平台，其公司联系地址位于杭州市余杭区五常街道文一西路969号3幢5层。

也可以修改部分颜色啊，无非就是需要你使用PS的水平高一些而已，如果自己搞定不了，可以找设计师帮忙啊
另外，iconfont当中，登录之后，是可以下载源文件的（AI），用相应的软件就可以针对图标进行细节 *** 作和处理

如何引入外部字体库iconfont的图标，具体如下

直接使用阿里巴巴的网络路径

选择iconfont图标

官网：阿里巴巴矢量字体库
步骤：阿里巴巴字体库使用方法

全局引入appwxss

12345678910111213141516171819202122232425262728293031323334@font-face { font-family: 'iconfont'; / project id 518032 / src: url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmieot'); src: url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmieot#iefix') format('embedded-opentype'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmiwoff') format('woff'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmittf') format('truetype'), url('//atalicdncom/t/font_518032_t2q88z3jok8iwwmisvg#iconfont') format('svg');}iconfont { font-family:"iconfont" !important; font-size:60rpx; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/本项目使用的18个图标 /icon-zhiding:before{content: '\e739';}icon-zuojiantou:before{content: '\e736';}icon-youjiantou:before{content: '\e735';}icon-shangjiantou:before{content: '\e734';}icon-xiajiantou1:before{content: '\e733';}icon-xiajiantou:before{content: '\e6cc';}icon-gengduotianchong:before{content: '\e67f';}icon-erweima:before{content: '\e65f';}icon-fenleiorguangchangorqita:before{content: '\e64f';}icon-dibiao:before{content: '\e64d';}icon-bangzhu:before{content: '\e64a';}icon-xinfeng:before{content: '\e640';}icon-duihuaxinxi:before{content: '\e639';}icon-sousuo:before{content: '\e62f';}icon-shouye:before{content: '\e62d';}icon-shezhi:before{content: '\e62a';}icon-shanchu:before{content: '\e629';}icon-dianhua:before{content: '\e61b';}

使用图标

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

注意：此处实现采用的是无APPID的开发模式，实际应用应该在微信小程序管理平台的开发设置中配置合法域名。

下载到本地

步骤

字体文件转化成base64格式

解压压缩包 —- 找到ttf格式文件 —- 上传到平台转化为base64格式 —- 下载压缩包 —- 将css文件名改为wxss —- 放入项目文件夹 —- 用@import全局引入 —- 使用

使用—-引入及全局定义

123456789101112131415161718192021222324@import "src/css/iconwxss";iconfont { font-family: "iconfont"; font-size:60rpx;}/本项目使用的18个图标 /icon-zhiding:before{content: '\e739';}icon-zuojiantou:before{content: '\e736';}icon-youjiantou:before{content: '\e735';}icon-shangjiantou:before{content: '\e734';}icon-xiajiantou1:before{content: '\e733';}icon-xiajiantou:before{content: '\e6cc';}icon-gengduotianchong:before{content: '\e67f';}icon-erweima:before{content: '\e65f';}icon-fenleiorguangchangorqita:before{content: '\e64f';}icon-dibiao:before{content: '\e64d';}icon-bangzhu:before{content: '\e64a';}icon-xinfeng:before{content: '\e640';}icon-duihuaxinxi:before{content: '\e639';}icon-sousuo:before{content: '\e62f';}icon-shouye:before{content: '\e62d';}icon-shezhi:before{content: '\e62a';}icon-shanchu:before{content: '\e629';}icon-dianhua:before{content: '\e61b';}

开发使用

123456789101112131415161718192021222324<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon></view><view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon></view><view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon></view>

效果图

---