1:创建/font/iconfont.css

在线方式:

@font-face {font-family: "iconfont"; /* Project id 3266214 */src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype');
}

离线方式:

@font-face {font-family: "iconfont"; /* Project id 3266214 */src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA9cAAwAAAAAG5wAAA8MAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIoF8IxYGYAA8Cqxsoz8BNgIkA4E8C2AABCAFgXwHIBu+FSMDwcYBUAg+QPbPA9t2kZ4QaqUYhPGnjWBhMn+a786fkHAc3UIw6edx0/9zA56QpFCKN5BQUawmQKEPa52aTkyYuHzp9jqxTvyJSvdEp1IC4tTPOA9gQLKBw6PL9/QyFqSi9cW1N21vlBx9I+c0k2M3TuyLPRjznzrfp5alXifJHxDHAo7tGUoAzpqsspSPwIb/mytt+N25jbprHaCxpypklcxMku79TBZmDyfZ9HVSvONsAclV1daRMEnxgKZACtgBC9NXyUqaLmvLwVWCXYSVL0cGAAMAEsBFNMyP8DSVrwpUoSrKFgNAJBAAqRIieBFCgCybgZB4hCoONMxAoghMOaGpICLRTIgS1BhZFSJqtqpG1pqIzkT0JmIwkdg3hTAAjABMEBYAB8AMIA4SDyABkgggCZIMIAVAqlKTBiDdL8SgCk+FBHc3dA48nvZkALIYR2tBoGwVbseGAGXGpaCNJnBAJ6PEdcflXbkXvox/Q4oMmID3gQgAxKUN+1UUI6d7SXQHYYPwq0iEneRhhSusgYGM5V+RsXzgJy0q7v6IBeS2bVsARCcBJPGRZxQDKiCKNR3txOxw6K8KGB+ECEQAYgdDwAMMHw77DUo00CQZT7JVpFwkUIuSi0iTlvSPRGqFUi2ZINJFEURePH0aSpFB0DpCptckOclYjVb5B+hpIx1dqSjI6VCTZJs2eua0/5OcburcQ8nmi5G5uIYNmbSUQ9Q2IhYgLQkeYpC7LXICeUJnZMBDIKaOUxWZQoZshlQ+dTPqJM4xzSRrhhQ+pXoHsvYAbYVHQGjUPQkZoxmfHLZ9XGIXhnXvxNox53PLsflWveMdcpP8aY9W9M49aSx4DRHyXFYgq1aut2M8CY/sANM4R2qxJz/9oDzaPc6Hj3ZCds6tAAtIUsRpNc01pcgWFCQqj30ogZKQJjWlGM/dAsLhZMLzYn0yRC/fvryxzVAVNXBVF9Z39W2IuJexp7WsTOj2SPAVo8ou5Y2YsR4uFCEwqMVpcBVjPFz40Enjt5k87saYPjSDekmqtonBVGuxD830UI2GQCtMgzPOYUrLGLDKF6KU8q2nFJdAM77x5vB9zEFdIMcuEMbNYicB1mco6In68bUjOpk+352H3uiLQzc8h8ZW5keBjYECL6Z/HfN0t1v4BmO1FzLtWyMnWr7RsnYTGO0oWAeZAvZacqohU3F7OO1S5RNIfS7Mwea3pdx1K2I48Y3foo2TnRDVucFOI2G5I34Ez0iNGLYN6ji4lC5PsDEtNurBGdvzyBZ2cAFXfQbZNMYk6JThFqjA4IqYfMBBXCITmCekTxGJqt71QSMou7ZhI2gTETJjtYiPAjt18rdHkGSuQGbDsFzFopN2nphL5Eqt3Mbuechct8FPvz/owfNwdxxQ227q6OSaPwhklrlJhawoCL9rhEpcnq6Xj/dxlf/d9qg9G3WKyB3PbWKI+YhZyHP9N/59ZAfE90B370ngSSWSLO48xM+5143FkCh8SXzB6gjibXfzdN8GRnefbi/jV1VAZhADpExjMcbYnAWdW8MPpUBTcrQg0JlXM4lbBDLEkPNFTCh69XbhaaxGqtD54NaMcrSxU5TT5WgHCdRvp0vNiWbKTdqJ5W2PBvATP2hj+BMkilpZAWdT9gVaQ/EE4h5KLFN7KJ4ymwe+/u07KNnybZmEthOcspqIjyjG/aitmCGoiqcFt6A9C3QwaG1Tx02Qg08Ln3TnixbG+V7M0Xt36eXfeLnptTxQ+wJX0ae54LMtpqsFhRUQXshnUlh426JTRryanTpsr6ntPZpLlMwFbq+xWJ5CR1RIubLm4i178chiwZQ1uA9io4hCOOo0ulcHfco73o/VuS4xa227HHZgk7DVEiLLFTcsrdrzLAteveeUbSngJDKjVwastpGpnFnPOsVePIbswGyuNVOjCD9ddlGUhlsRvYCvYbmY4/d4jlUyXjGBhyUUQXkI7/efBOQLIOOIlNU6aW1FpJfErX2CcyqweNofL7CvIKZuk9nSQ0BaRgz1A65hKz2Vb1/XwGFPZEV49Xy2GKa8jE05lVUYNpW3DiY3b7ufa2Uz9bvrrZGo7/E8/1L7DKM3K2mwLakpQ1ZE1Li/XN2yTVPtbusaW3O8ZfEPlGm1EB9JkRMhEwOv3iYiytuT/cvup58WcLgCVNGpdHjea6c72ooKRYwnjtrQtjF4LR0RNR0XOp1cpGTDTSjgRXL4AHkKyn7XAIUTE3McfijYEMk1A5Rw090H/oSiT6KKahj9CZVEChYCFPfHF3cHwXU3cvbAQ8i989RR3Q8lGyIlGwGcvIizpJTCidnZGzrB2T+HPNALKOZ2Fd1joBBMVpfLGo7rwZ9bXG6L1OJWHzGE2VgWSXEgFIBQlQhkWw+tHbt3e5x+geTDN9M8qGUK4iGQ4pkd7LKJV/jRWLzxHeYy805gicR4gdlvcqOEefc0+OKq2QQQOOF6AnCLhwiK0GELRWhTKEDfZKcPpB8Ez2x0UrU0SVCR2EOx3yK5ZRMF5aFoz0FSn4/yUv9S4eW11D9n3FrfO8yo83K5VNE8+QLFhKjRedkvvysnr/Z8t5TjFG+2WBg7bvcVOpTAk9utyZBxleTk3Hh66GjVopjRU+nxnNv4+veLfxgj/U66S1aS1JIk2+8TSyZVSIZfeTMIi3DWmz8Mj5ZIxK3JqYbXNz7mymLIWlfuSfcQVW8hxd7GizsdrIyN2llxBRDPQBGzVmsOqxJ8ptZQJURGH1oQqgK1JOv8jRR3yaZFYh4X+j0h7Hksi7nc9YX8d73B8Kxh3RDusiqm1+FD/w8xxqDCGPpCIMSqXgFerzx2rS4TVV6hSxOCu2SsjPir9MdwgBEu4A7OFkOf7tThaVwDe9vcR3fJFQ4KzlN0O0XJlC4eZB6LdGq5L41mRBRx3niI98YpAjStL2IIw8k+3Ofz+3AQbxeLCBs4c2nvnWlwcBrdyo30Gdobe+jTpw3Xbem+OcJ/qyfeGBTAeKaon1Ea+wuZTMP/UT17OuO3JKaw36hk+ouYVN4YfNKd+dXvbO37bcIiOkzHU3X0wsuhKQJPKLw1eqQng40TtiZOTQjBNRK/MVCDaXowtVh/lyD/w5ej/sWlqptRxkJWOM6EpkS/+6wxPuDnRUWyOvcYvrIXl9p7TOOEJtdrbMm0iU/f0N7eJQrrrdWJdp/dZq+ptlnrXfqp+h5gX+nnGJ/mnIq5UhwT9JrXJ3Jc0jpzrwD+c07DqTWsRmPXqB3qCvF5ifKYWHJMKTmfn1NnqVPMxfE5CmtxX0zfv2OampqbhqqGTsXxqQOZUSSOU1HNluZzZx3+AqqX8br0V4ac8VOV+wRLLE6n5ZiqGKGg9SS6S8VcYD6n8pAhuwT7psQ5hxcWDne6CocNL9KmPqyoaJjLWTR8WKFzbXooNS1kkaUFg6npFrAMCyVSQ6HUsf8yQL2x9RUqTNG11OVzQ4Pd6O4lR1iEX6DCtJVhbyFu4ePwW8RY40kQA0RNLQ6Q3xHSfcC+rVGU5LzU8PBzzSVhfDh+6p/t9txi3kMMd7kTctUZ2qQ1QafDTjfdcxkQAoAUb53dkVgzL98sN5Myx2opbNmPtkqrtcpuw5YBNmeGpcpmt/QuXvjXgbWZsyNJfC/2vN6rTXIOK6rnFqogF6CHvD8yN+FKurN19cQWXVina9B1vvJJT8My4keBNiL67Ywojl2SjZ84NEfdEWZMtWPVKdL1kzCYqOrH8X7VsIvZMVkL1lCCNSdzPSzk3m7sy6wg22/yeHXvXnxraGfC4X0tfyExIHtggs7rNm/KTqsyX7tG38X0lPK4q1er4lJRJHj3Odu45dxdOTLt0+cO8RopwjmUk3TLd5jYfc/kXgd1WKb5wOPHFJoUef+x/7JNzzHU9jPwWz+UTfrvkBBq+AFDE4RU31oENvYDsq70XbNyvyA63elM36ryaMF+pa/rJnOIKafNN19DguPD6WkV7A+mirRVbLHpB0hhvy6pmuwjcHGmIfLA+gNBEb8ItzmC9VionusR/OoV/YEAYhUBa0/i/+L4TfwgPhbHx+AuhAj9Rjr+Ul9IoaAjkurKDSwNqA+XuqMscVri2MSliWVLjOU3jCOMN8qN2evPGozfGfmYGYzfGvzbp+FbM44PoXu3Y4Qatx+h6wTCt46Uq/KSk/NU27cpEgggWqgLMeRcjZSmqEtqiztuf5xdJg8o+YosNo2R3GELLpxdNd3kUARW2RxydK3wlbBIQOEwccF9OSXP0sHUjh0qAkpfq9TbBceoJnbesoKT0g5JbfV6d6Y742B6rbRWsqE605PhStsnCUtbu3ZtG9ZKrdVptdf2VRGLw3VLxU2Nsq749l+/nu/zi2vEixIv9frmi2zRYOKqpkkuM+3T+hr3rWeU7Jzic+fzw+0bjOvG27OKd4/r6pZx+abgDTxYXvrm6yuUKaM7hnTMjJn54FGoNBiG06P4d/Um5H44J/WJ3+5/kjrf4nJZmifYdvMRiSH+oIVsFADklYowEAJUQiavholtPX/zOqKtGGbjVZAekiohKzAnXSX4ece2iaN9EtVfR+KFi6QNR/ds6UJBAICPUAw3+P3NQ+zBe1Hub1cYNgr543gc8w6TzVzomZClmSL+jE3g1OkX3f/hoehYWhrj+93e8f7Nv789tOqy3jP2/cx36drbs6yVfzndmaVvS1X7PB36EHjy0hcnBS51vTRV+9GiimxLpaIhi/kuv0rKTaQ9vfIcNEQ9PLet2xsim8bQQ9PrSs8XtMddaKugVd/Vq8b9kunx+qpzzs7IE6tqUjfFTxnVd+cZ5/7ZNdfME4VQs6w1cdq70dg33yqi/73g0Xsl6zLHr9/7qr5psVdVnxxKK38rgsWKEbpwDHM1el6frJ0quC/m8cPO+b7t4SLjOgNzMjdvFwAIj+IA3e3DJMoPJkjPdj0Kyh8HHTWfRkGQOAc7o2AC6LUzsvl+EGN8qL4YyLGpA0HDCH5u2MYncYHH9mAnq92wcYo2JTY67YZEljHnjq6OgO4xCJVnobHkEdHAYRjy6sAcniyxc/iMaucIaE0aTchoteGWri422u29jKxtvZ3MPVTSWf9d+cp1FFprt9kPl113m9RUCjNPz8PTHg5OBewTU+cY9rJg4CSHHwA=') format('woff2');
}

2:引用

App.vue中 添加

<style>@import './font/iconfont.css';
</style>

3:使用

<icon class="iconfont icon_ts "></icon>

设置大小

font-size:xxx

Uniapp 添加Iconfont相关推荐

  1. uniapp引用iconfont图标

    不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再unia ...

  2. angular 使用ng-zorro添加iconfont图标

    angular 使用ng-zorro添加iconfont图标 在本文章我使用的是symbol的方式,你也可以使用fontClass或者unicode方式,但据官方原话来说,symbol是以后的主流 方 ...

  3. uniapp添加顶部导航栏并且使用iconfont图标

    一.在阿里矢量图选择自己喜欢的图标,然后点击收藏 二.右上角下载全部已经收藏了的图标代码 三.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到项目static文件夹里,然后再打开ic ...

  4. 【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决,移动端引入报错解决】

    前言 为什么要使用阿里图标库: 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标,主要原 ...

  5. uniapp使用iconfont字体图文教程

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一.iconfont官网注册 二.使用 1.选择官方图标库 2.找到要用得字体图标加入购物车 3.添加到项目 4.生成网络地 ...

  6. uniapp添加顶部导航栏颜色渐变

    在uniapp文件夹的pages.json文件中添加如下代码即可实现 "backgroundImage":"linear-gradient(to right, #FFDE ...

  7. uniapp添加顶部导航栏并且更换图标

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...

  8. uniapp添加网站favicon文件

    前言 uniapp 默认创建的项目并没有给我们提供加上网站 favicon 的 "机会",但其实官方已经给出解决方法了,使用的是 自定义模板 自定义模板的场景,通常有以下几种情况: ...

  9. uniapp添加阿里字体图标库图标

    字体图标添加 1.需要到阿里矢量图标库添加 2.添加后Unicode下载并替换@/styles/font下文件 3.在线图标方式 复制阿里矢量图标库->我的项目->Unicode-> ...

  10. uni-app 使用 iconfont

    根据官网 小于 40kb 的字体文件可以直接本地引用. 方法如下: 首先下载字体文件. 然后删除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用. 放入到 s ...

最新文章

  1. html在线热点工具,Heatmap.js 强大的 HTML5 画布 WEB 网页在线热点图插件 - 资源分享...
  2. 维基解密揭秘CIA五种恶意软件用法
  3. 感情沟通出了问题要怎么解决_冬养的月季花枝条干枯,开花萎蔫,哪里出了问题,该怎么解决?...
  4. 贪心算法———房间搬桌子
  5. PIL库自我学习总结及应用(美白,磨皮,搞笑图片处理)
  6. Linux 命令之 type -- 显示指定命令的类型
  7. 整数线性规划实现(matlab分枝界定法)
  8. php this db get,php – Codeigniter $this- db- get(),如何返回特定行的值?
  9. 借助FLASH技术美化VBA操作界面
  10. 善用assert函数
  11. jquery,字符串转json对象,json对象转字符串
  12. 参考答案+实验设计与分析(第6版) [Design and analysis of experiments] - 蒙哥马利(Montgomery D.C)
  13. weblogic安装配置教程
  14. 程序化广告(2):程序化广告的参与者
  15. 服务器打开xlsm文件,XLSM 文件扩展名: 它是什么以及如何打开它?
  16. bzoj千题计划268:bzoj3131: [Sdoi2013]淘金
  17. 用计算机画画的优质课,小学信息技术优质课和画图工具教案.doc
  18. 网络信息安全运营方法论 (上)
  19. Android vivo手机无法调试安装Apk的解决办法
  20. python 调用qrcode库实现二维码识别

热门文章

  1. 【SuperMap】SuperMap.Geometry转GeoJSON
  2. 常用报表开发工具介绍
  3. Error 遇到错误:请求通道在等待 00:01:00 以后答复时超时。增加传递给请求调用的超时值,或者增加绑定上的 SendTimeout 值。分配给此操作的时间可能已经是更长超时的一部分
  4. OneZero第一次站立会议Sprint Planning Meeting(2016.3.21)
  5. Global land use changes are four times greater than previously estimated
  6. linux计时器命令,安装及使用Linux终端倒数计时器Countdown的方法
  7. Mocking and Stubbing
  8. 满腔热诚永不忘,我以我血荐轩辕!
  9. 关于【野火】OV7725例程移植【OV7670】总结
  10. 手摸手,带你用vue撸后台 系列一(基础篇)