vue中 字体图标引入 - iconfont阿里字体图标库

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

官网:iconfont-阿里巴巴矢量图标库

代码应用中,有许多方法,如何使用该图标库。如,icon单个使用、unicode引用、或 font-class引用(推)、symbol(svg合集)。本文主讲 font-class 方法。

vue中 字体图标引入 - iconfont阿里字体图标库,vue项目,笔记,vue.js,前端,css

font-class引用

支持ie8+,及所有浏览器

vue中 字体图标引入 - iconfont阿里字体图标库,vue项目,笔记,vue.js,前端,css

1. 获得项目下面的 fontclass 代码

加入库 -> 选择完所需的图标后,右上角的购物车 -> 添加到项目 -> 自动跳转至 我的项目,点击Font class -> 点击复制代码(!!这个才是你项目的代码

vue中 字体图标引入 - iconfont阿里字体图标库,vue项目,笔记,vue.js,前端,cssvue中 字体图标引入 - iconfont阿里字体图标库,vue项目,笔记,vue.js,前端,css

2.  在项目的 index.html 文件中导入,链接为1.中的fontclass代码

<link rel="stylesheet" href="fontclass代码" />

vue中 字体图标引入 - iconfont阿里字体图标库,vue项目,笔记,vue.js,前端,css

3. 使用 - 在页面中,使用 <i class='iconfont icon-xxx'></i> 进行应用(其中,iconfont是基础样式类名,icon-xxx是具体目标类名)

 vue中 字体图标引入 - iconfont阿里字体图标库,vue项目,笔记,vue.js,前端,css文章来源地址https://www.toymoban.com/news/detail-706658.html

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

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

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

相关文章

  • 在uni-app项目中简单使用iconfont字体图标

    1.1 减小打包体积,一些平台如微信小程序等在发布时有体积限制,大量使用静态资源会使得打包体积容易超出限制 1.2 字体图标是矢量的,缩放不失真、模糊 1.3 对比引用多个网络图标,字体图标只需一个css文件即可,因此减少了网络请求次数,同时比下载图片节约流量 2.1

    2024年02月05日
    浏览(61)
  • 【易售小程序项目】顶部导航栏和底部导航栏设置+iconfont图标引入

    在正式开发小程序的功能之前,首先需要确定小程序的主要框架。 我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”,“首页”已经存在于项目中,不需要重复创建。创建过程如下: 创建成功,不仅创建了 star.vue , Hbuilder 还自动帮助创建了 star 文件

    2024年02月10日
    浏览(42)
  • uni-app使用iconfont字体图标

    2024年02月07日
    浏览(57)
  • C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】

    正确的格式,注意字体文件 “xxxx.ttf” 应写为 “#xxxx” 比如我的图标字体在当前项目的 /Assets/Fonts/ 路径下,那么我在MainWindow中引入该图标的话,应该如下面的代码一样。 点击字体文件,然后右键–属性,将生成操作选为Resource(资源)即可

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

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

    2024年03月20日
    浏览(79)
  • 【UniApp开发小程序】顶部导航栏和底部导航栏设置+iconfont图标引入

    在正式开发小程序的功能之前,首先需要确定小程序的主要框架。 我的小程序需要创建的页面是“首页”、“我想要”、“私信”、“我的”,“首页”已经存在于项目中,不需要重复创建。创建过程如下: 创建成功,不仅创建了 star.vue , Hbuilder 还自动帮助创建了 star 文件

    2024年02月16日
    浏览(53)
  • Element-Plus搭建CMS页面结构 引入第三方图标库iconfont(详细)

    element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库,专门用于电脑端网页的。因为里面集成了很多组件,所以使用他可以非常快速的帮我们实现网站的开发。 安装: npm install element-plus --save 引入: 引入的时候也是分成两种,一种是全部引入,一种是按需引入

    2024年02月15日
    浏览(47)
  • Vue项目 css下载字体并引入使用

    1.下载字体         下载字体: 字体下载,字体大全,免费字体下载,在线字体|字客网 字客网是全球知名的字体下载与分享网站,齐全的中文,日文,韩文,英文,图标,美术设计,毛笔,钢笔,手写,书法字体大全,提供找字体,字体识别,字体下载,在线字体预览,字体转换,字体设计等服务

    2024年01月16日
    浏览(38)
  • 小白详解Vue3项目中怎么引入 SVG 图标

    今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程 SVG 图标 既然是页面,肯定离不开一些图标 icon ,所以肯定要去最全的 阿里图标库 来寻找 这里讲解下如何将 阿里图标库 里面的东西,放到我们的页面上 阿里图标库 进入页面,找到 资源管理 下面的 我的

    2024年02月09日
    浏览(42)
  • 微信小程序使用字体图标——链接引入

    目录 1.下载字体图标  1.选择需要的图标加入购物车添加到项目 2.查看项目  3.生成在线链接   4.复制生成的链接 等下放到iconfont.json中​编辑 2.引入链接 1.下载  2.生成iconfont.json文件 3. 在iconfont.json中 放入生成的链接 4.需要重新编译小程序之后在终端执行 5.在app.json中引入字

    2024年02月16日
    浏览(227)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包