原创1.1关于阿里图标引用问题简介

渡劫的咸鱼哥 渡劫的咸鱼哥     2022-09-14     506

关键词:

一、阿里字体离线应用步骤:

  码云demo路径:https://gitee.com/ilaozhao/usuallyDemo.git

  1、访问阿里字体库,将需要的图标添加至自己创建指定的项目;    

                

    点击购物车后,右上角会对应的+1, 如下图

           

 

 

  2、点击购物车后,会出现如下提示,此处我们选择添加至项目;(下载素材则可以选择svg,png,AI文件)

    

  这里将项目名称配置为了demo(名称根据个人喜好可随意配置),点击下载至本地;

     

 

 

 

  3、解压缩,新建css、font文件夹,将相应的文件夹复制粘贴到对应路径,如图所示:


    

 

 

    放入指定文件夹:

      

  4.link引入css外部样式表

  

 

   渲染效果如下:

  

 

   5、注意:如果项目里的icon有更新,需要重新下载项目icon包,替换之前的文件

二、在线阿里字体引用步骤

  1、使用账号登录阿里字体,选择需要的图标放入购物车样式的图标中,选择“添加至项目”选项

 

  2、按照如下图所示步骤添加至项目



  3、“查看在线链接”→生成在线代码


 

   4、复制,粘贴至css样式表

 

 

  5、编辑html文件

 

 

  复制图标代码,添加至html文件的 i 标签中

 

    完整样例代码如上,①标记处类名可自取(尽量不要取关键字)

  6、代码运行结果如下:


  2017/12/13补充:

    4/5之间通过link引入

      

    

    不足之处:.html文件直接打开,需要刷新页面后才能正常显示

    个人亲测所得,如有不足之处,请多指教。(若转载请注明出处)

 

引用阿里巴巴图标库

<!DOCTYPEhtml><html><headlang="zh-cn"><metacharset="UTF-8"><metacontent="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"name="view 查看详情

iconfont-阿里图标库的使用简介

官网地址:https://www.iconfont.cn/1、进入官网,选择一种登录方式。2、选择一个喜欢的图标库小库打开3、进入小库后选择一个喜好的图标,点击收藏或下载,这里点击下载4、点击“赋值SVG代码”,直接放进hmtl文... 查看详情

引用阿里云矢量图标库

1.登陆http://www.iconfont.cn/ 例如我需要购物车的图标2.按下回车后会出现一堆的购物车图标3.喜欢那个一个就鼠标移动到图标上去,加入购物车4点击加入购物车后,就会出现在右上角的购物车5.点击右上角的购物车,点击下载代... 查看详情

阿里妈妈的iconfont的引用问题(代码片段)

...sp;  我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢。二、点击图标           嘿嘿,上面的操作步骤我就不多说了... 查看详情

引用阿里巴巴字体图标写在外部样式为啥显示一个框?

我用unicode方式引用阿里巴巴图标,css样式链接在外部,为什么显示为一个框,而写在内部就可以显示图标?参考技术A<styletype="text/css">.titlecolor:#00a8ff;</style>放在head中<divclass="title">这里是字体颜色示... 查看详情

关于阿里云图标库---iconfont的使用

在自己写项目的时候经常会涉及到页面的布局,还有图标字体的使用。当时发现了iconfont这个神奇,恰好有个小姐姐说也想学一学,所以写一篇这个博文推荐给大家。iconfont官网传送门:http://www.iconfont.cn/下面进入正题: 第1步... 查看详情

为关于百度快照的问题!

...坛,百度快照为什么是其它论坛上的而不是我论坛上的?原创绝对是我站的。好像不能发网址上来,所以不能给大家看了。注明:我还在发表的文章前面加了转自17创业论坛。然后是我论坛的名字是因为百度首先在别人论坛上看... 查看详情

vue+elementui引用第三方iconfont字体图标(阿里巴巴矢量图标库)(代码片段)

第一步:登录阿里巴巴矢量图标库。第二步:把需要的图标添加到购物车中。第三步:点击购物车中的“添加至项目”按钮。第四步:点击项目中的“下载至本地”,会下载一个压缩包。第五步:把压缩包... 查看详情

阿里云对象存储oss简介

版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhlOSS概述阿里云对象存储OSS(ObjectStorageService)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数... 查看详情

阿里云对象存储oss简介

版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhlOSS概述阿里云对象存储OSS(ObjectStorageService)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数... 查看详情

阿里云对象存储oss简介

版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhlOSS概述阿里云对象存储OSS(ObjectStorageService)是一款海量、安全、低成本、高可靠的云存储服务,可提供99.9999999999%(12个9)的数... 查看详情

关于阿里巴巴iconfont的使用方法

iconfont网址:http://www.iconfont.cn/说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清。用户在iconfont.cn可以下载,多种格式的icon,平台也可将图标转换为字体,便于前端... 查看详情

关于druid的一些简介

DRUID介绍DRUID是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0、DBCP、PROXOOL等DB池的优点,同时加入了日志监控,可以很好的监控DB池连接和SQL的执行情况,可以说是针对监控而生的DB连接池(据说是目前最好的连接池)D... 查看详情

arduino开源库u8glib2之图标显示原创

Arduino开源库u8glib2研究之图标显示          -----------------关于drawXBMdrawXBMP函数使用的研究因为心血来潮,近来想做一个贪食蛇的游戏,手上有Arduino和我们自己开发的NewbitOLEDShield,硬件完全满足... 查看详情

原创windows图标助手v2.0

 Windows图标助手v2.0软件大小:4.12M软件类别:国产软件/系统美化软件授权:免费版软件语言:简体中文应用平台:Windows推荐等级:★★★★★修改时间:2019年4月6日,13:14:15MD5:ED8FD4CB7C481A0C13D9B731FA5A75A3SHA1:D07407342D224171A55CF0FDE9F66A... 查看详情

arfoundation入门到精通-1.1arfoundation简介

一、关于ARFoundationARFoundation允许您在Unity中以多平台的方式使用增强现实平台。此软件包提供了一个供Unity开发人员使用的接口,但本身不实现任何AR功能。要在目标设备上使用ARFoundation,您还需要Unity官方支持的目标平台的单独... 查看详情

关于html/css的路径问题

非原创,转自:http://blog.sina.com.cn/s/blog_6c21f6480101cb33.html 【问题描述】:比如你有Web项目solo,假如目录结构如下:    在cy.css中有如在根目录的一个index.html文件被引用到如下代码:body{    background... 查看详情

(原创)simulink-关于示波器模块显示精度不够等问题(代码片段)

问题1、信号显示精度不够,比如理想信号是正弦信号,但是显示的信号不够smooth解决方法1、步长设置,在simulation->configurationparameters->solveroptions里修改type为固定步长,并将fixed-stepsize修改更加精细解决方法2、示波器模块设... 查看详情