阿里巴巴矢量图库的引用以及更新

阿里巴巴矢量图库的引用以及更新1 打开阿里巴巴矢量图库的官方网站 iconfont 阿里巴巴矢量图标库 2 登录 3

1、打开阿里巴巴矢量图库的官方网站

iconfont-阿里巴巴矢量图标库

2、登录

3、搜索你想要的类型然后加入购物车然后添加至项目 下载到本地

阿里巴巴矢量图库的引用以及更新

阿里巴巴矢量图库的引用以及更新

阿里巴巴矢量图库的引用以及更新

阿里巴巴矢量图库的引用以及更新

 阿里巴巴矢量图库的引用以及更新

4、下载好的文件解压之后放在你的项目目录里边 在在你的项目中引入iconfont.css 文件

 阿里巴巴矢量图库的引用以及更新

 5、使用字符标签 创建一个i 标签 添加两个类名 一个是icon font 一个是字符图标的名字

阿里巴巴矢量图库的引用以及更新

6、浏览器展示出来的数字图标可以通过图标的类名设置字体样式 大小颜色等

阿里巴巴矢量图库的引用以及更新

7、重新添加图标要更新图标的代码 然后更新好的代码替换掉icon font.css文件

阿里巴巴矢量图库的引用以及更新

阿里巴巴矢量图库的引用以及更新阿里巴巴矢量图库的引用以及更新 

 此时已经更新完毕

图标的类名我们可以在iconfont项目中复制

阿里巴巴矢量图库的引用以及更新

8、 如果我们引入彩色的图标我们需要引入一个js 链接

 

 阿里巴巴矢量图库的引用以及更新

 

 阿里巴巴矢量图库的引用以及更新

  并且需要在style样式中书写以下代码:

 .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .box { font-size: 150px; }

 在更新图标的样式之后css和js都需要更新。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/229315.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午4:59
下一篇 2026年3月16日 下午4:59


相关推荐

  • centos7卸载软件命令_linux安装docker

    centos7卸载软件命令_linux安装docker1首先搜索已经安装的docker安装包[root@localhost~]#yumlistinstalled|grepdocker或者使用该命令[root@localhost~]#rpm-qa|grepdockerdocker.x86_642:1.12.6-16.el7.centos@extras

    2022年8月30日
    8
  • 75道面试逻辑智力测试题内附详细答案「建议收藏」

    75道面试逻辑智力测试题内附详细答案「建议收藏」【1】假设有一个池塘,里面有无穷多的水。现有2个空水壶,容积分别为5升和6升。问题是如何只用这2个水壶从池塘里取得3升的水。答案:由满6向空5倒,剩1升,把这1升倒5里,然后6剩满,倒5里面,由于5里面有1升水,因此6只能向5倒4升水,然后将6剩余的2升,倒入空的5里面,再灌满6向5里倒3升,剩余3升。【2】周雯的妈妈是豫林水泥厂的化验员。一天,周雯来到化验室做作业。做完后想出去玩…

    2022年5月14日
    92
  • winform使用SplitContainer控件[通俗易懂]

    winform使用SplitContainer控件[通俗易懂]在Windows资源管理器中,当把鼠标指针移动到TreeView控件和ListView控件之间时,可以左右拖动鼠标调整TreeView控件和ListView控件在主窗口中的大小比例,以适应不同显示内容的需要。我们可以使用SplitContainer控件实现这种功能。  可

    2022年7月18日
    99
  • 【谷粒商城】全网最全笔记(1/4)「建议收藏」

    【谷粒商城】全网最全笔记(1/4)「建议收藏」本文重点记录老师讲的话和一些配置流程,笔记中有的内容尽量少记录。边看视频变更新,我尽快更新。

    2022年6月13日
    29
  • jsp开发技术

    jsp开发技术一、为什么说JSP也是动态web开发的一项技术呢?这是因为写JSP虽然像是在写HTML,但是JSP允许在页面中嵌套Java代码,或者利用某个标签表示Java代码(EL与jstl)。这就使得我们在写JS

    2022年7月2日
    29
  • log4j 配置日志输出(log4j.properties)

    log4j 配置日志输出(log4j.properties)2018年5月27日一、入门log4j实例1.1下载解压log4j.jar

    2022年7月15日
    18

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号