iconfont 新加图标( 在原有项目的图标库中加入新的图标)

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

需求:半路接其他人开发过的项目,由于项目已经生成了一些原有的图标,而我们也没有加入对方的项目组里,只能自己新创建一个项目,再把需要的图标加入项目里,生成对应的iconfont.css 文件,加入到原有的项目里,废话不多说,步骤:

1. 既然用到 iconfont,肯定的先找到图标加入项目里。 iconfont 是阿里的一个图标矢量库,

  地址:https://www.iconfont.cn/   ,登录不多说,可以用微博账号登录。

2.找到自己需要的图标 加入到自己的项目里,没有项目可以创建一个新的项目。

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

 iconfont 新加图标( 在原有项目的图标库中加入新的图标)

3、接下来就是把我们新的图标引入到原有的项目里,找到项目里的iconfont 文件夹,找不到的话全局搜 iconfont.css 文件,可以看到原有项目已经有了  iconfont.css等等文件了,而我们怎么引入呢?

把减压后的3个文件的名称改一下 iconfont.ttf 、 iconfont.woff 、iconfont.woff2,改成自己的名称(谁便起名),然后复制到项目 iconfont 里面。

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

 4. 复制完成后打开 iconfont.css 文件,把对应的 @font-face  代码粘过来

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

 iconfont 新加图标( 在原有项目的图标库中加入新的图标)

5.把对应的图标代码也沾到   iconfont.css 里。

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

6.这样 就可以用到新的 图标了。

iconfont 新加图标( 在原有项目的图标库中加入新的图标)

 结尾:iconfont 有多种方法应用,如果图标少的话,或者临时用的话,可以直接下载成图片更简    单。。。文章来源地址https://www.toymoban.com/news/detail-422095.html

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

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

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

相关文章

  • git基于原有的分支拉取(创建)一个新的分支

    git checkout -b newbranch origin/oldbranchname newbranch:你要创建的分支的名子 oldbranchname:原来的分支(你要基于的分支) git push --set-upstream origin newbranch newbranch:你刚刚创建的新分支的名字 git push origin newbranch 或者直接 git push newbranch:你刚刚创建的新分支的名字

    2024年02月15日
    浏览(52)
  • vue中 字体图标引入 - iconfont阿里字体图标库

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

    2024年02月09日
    浏览(72)
  • 微信小程序使用iconfont图标

    一、第一步进入iconfont网站 1.添加需要使用的图标,点击购物车图标加入项目   2.点击右上角的购物车按钮    3.点击添加项目按钮,选择一个项目添加即可,若没有项目,可以创建   4.添加完项目会自动跳转到下一个页面,点击font class 生成在线链接   5.复制生成的链接,去

    2024年02月08日
    浏览(71)
  • iconfont-extract: 一个将iconfont图标转化为React组件的工具

    iconfont 提供了海量的图标,同时也方便了前端开发者使用这些图标,只需要添加对应的js、css或者字体文件即可。在我们的项目中使用添加js文件的方式,js文件中都包含了所有的图标,一个项目中通常只会使用其中的一部分,所以加载了很多不需要的图标,iconfont-extract 就是

    2024年02月05日
    浏览(37)
  • iconfont 图标在vue里的使用

    刚好项目需要使用一个iconfont的图标,所以记录一下这个过程 1、iconfont-阿里巴巴矢量图标库 这个注册一个账号,以便后续使用下载代码时需要 2、寻找自己需要的图标   我主要是找两个图标 ,一个加号,一个减号,分别加入到购物车里  3、点购物车 4、添加项目   5、进入

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

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

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

    2024年02月07日
    浏览(57)
  • 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

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

    2024年02月16日
    浏览(87)
  • uni-app中使用iconfont彩色图标

    大家好,今天我们来学习一下uni-app中使用iconfont彩色图标,好好看,好好学,超详细的 首先,从iconfont官网(iconfont-阿里巴巴矢量图标库)选择自己需要的图标加入项目中,点击下载至本地,如图 在本地找到下载的压缩包,并解压,进入解压缩之后的文件,在地址栏中输入

    2024年02月11日
    浏览(41)
  • 解决uniapp的tabBar使用iconfont图标显示方块

    今天要写个uniapp的移动端项目,底部tabBar需要添加图标,以往都是以图片的形式引入,但是考虑到不同甲方的主题色也不会相同,使用图片的话,后期变换主题色并不友好,所以和UI商量之后,决定使用iconfont阿里巴巴矢量图标库。 想着就是需要简单的引入图标即可,但万万

    2024年02月15日
    浏览(50)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包