uni-app使用iconfont字体图标

这篇具有很好参考价值的文章主要介绍了uni-app使用iconfont字体图标。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先iconfont选择好自己需要的图标 添加至项目 下载字体文件到本地

uni-app使用iconfont字体图标,uni-app

将下载的文件解压缩到工程目录static文件夹下

uni-app使用iconfont字体图标,uni-app

定义好iconfont.css文件的@font-face声明,修改好引入的url地址

uni-app使用iconfont字体图标,uni-app

打开App.vue文件 ,引入static下刚才修改的iconfont.css字体图标文件

uni-app使用iconfont字体图标,uni-app

完成上线的步骤后就可以全局使用字体图标了

uni-app使用iconfont字体图标,uni-app

            <view class="search">
                <input type="text" v-model="searchName" placeholder-style="color:#c8c8c8;z-index:0;" placeholder="搜索">
                <span class="iconfont icon-fenxiang"></span>
                <span class="iconfont icon-close"></span>
            </view>

uni-app使用iconfont字体图标,uni-app文章来源地址https://www.toymoban.com/news/detail-729086.html

到了这里,关于uni-app使用iconfont字体图标的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

    好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1、字体图标 方法一、本地使用通过类名使用阿里矢量图标 1、把图标添加入库 2、把图标添加到项目  3、下载字体图标 4、使用文件 5、在对应的HTML页面上引入css 6、使用字体图标

    2024年02月16日
    浏览(64)
  • 微信小程序开发系列(十三)·如何使用iconfont、微信小程序中如何使用字体图标

    目录 1.  如何使用iconfont 2.  微信小程序中如何使用字体图标 3.  背景图的使用         在项目中使用到的小图标,一般由公司设计师进行设计,设计好以后上传到阿里巴巴矢量图标库,然后方便程序员来进行使用。         小程序中的字体图标使用方式与 Web 开发中

    2024年03月20日
    浏览(48)
  • uni-app引用矢量库图标

    矢量库引用 导入黑色图标 1.生成连接,下载样式 2.导入项目(字体样式) 3.引入css样式 4.替换font-face 5.使用图标(字体图标,只有黑色) 导入彩色图标 1.安装插件 2.在原有的下载图标基础上,通过 iconfont-tools 生成彩色图标 3 . 彩色样式导入项目 4.样式引入 5.使用彩色图标

    2024年01月17日
    浏览(39)
  • vue中 字体图标引入 - iconfont阿里字体图标库

    官网:iconfont-阿里巴巴矢量图标库 代码应用 中,有许多方法,如何使用该图标库。如,icon单个使用、unicode引用、或 font-class引用(推 )、symbol(svg合集)。本文主讲 font-class 方法。 支持ie8+,及所有浏览器 1. 获得项目下面的 fontclass 代码 加入库 - 选择完所需的图标后,右上

    2024年02月09日
    浏览(46)
  • uni-app引用外部图标库(阿里矢量图)

    作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标 第一步,在项目目录中新建文件夹,如图 第二步,登上阿里矢量图官网,将自己需要的图片先加入购物车,再点击右上角购物车    第三部

    2024年02月14日
    浏览(32)
  • vant自定义引入iconfont图标以及字体

    因为vantUI给的图标非常少,为了满足自己的需求,必须自定义图标,这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法 第一步:去阿里矢量库下载图标 点击资源管理—我的项目 —新建项目  在首页搜索需要的图标添加至自己的项目中  第二步:把项目下载到本地,

    2024年02月12日
    浏览(39)
  • Vue3 项目引入阿里 iconfont 图标和字体

    需求: 将 iconfont 阿里图标库的图标与字体引入到我们的 Vue3 + vite + TS 项目中来! 我们使用图标的方式有很多种,比如说直接使用 png、jpg 等图片格式,这是最原始的方式,所以我们这里不过多阐述,它们的优缺点相信大家也知道。 这里我们主要对比阿里图标库提供 3 种图标

    2024年02月03日
    浏览(35)
  • 小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

    一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后,项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件,使用组件 八、经过测试,成功。 参考链接 http://lihuaxi.xjx100.cn/new

    2024年02月12日
    浏览(34)
  • 【uni-app】uni-app中scroll-into-view的使用

    在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串 并且子组件的上绑定一个id值用于定位 以上就是今天要讲的内容,

    2024年02月11日
    浏览(35)
  • Uni-app组件使用

    组件是 视图层的基本组成单元 。是一个单独且 可复用的功能模块的封装 。 组件名称是由尖括号包裹的,可以看成一个语义化标签,是有开始标签和结束标签的。 如下举个简单的例子: uni-card  //这是开始标签 text 这是一个基础卡片示例,内容较少,此示例展示了一个没有任

    2024年02月09日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包