阿里iconfont使用方法

阿里iconfont使用方法阿里巴巴iconfont的使用方式分为两种:本地使用线上引用iconfont-阿里巴巴矢量图标库0.前期准备使用时先到网站上选中需要使用的图标添加至项目1.本地使用1.下载项目至本地2.解压到项目中3.在页面中引入样式<!DOCTYPEhtml><htmllang=”en”><head> <metacharset=”UTF-8″> <metaname=”viewport”content=”width=dev

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

阿里巴巴iconfont的使用方式分为两种:

  1. 本地使用
  2. 线上引用

iconfont-阿里巴巴矢量图标库

0.前期准备

使用时先到网站上选中需要使用的图标添加至项目
阿里iconfont使用方法

1.本地使用

1.下载项目至本地
阿里iconfont使用方法
2.解压到项目中
阿里iconfont使用方法
3.在页面中引入样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>iconfont的使用--本地引入</title>
	<style> @font-face { 
      font-family: 'iconfont'; src: url('./iconfont/iconfont.woff2?t=1626747157081') format('woff2'), url('./iconfont/iconfont.woff?t=1626747157081') format('woff'), url('./iconfont/iconfont.ttf?t=1626747157081') format('truetype'); } .iconfont { 
      font-family: "iconfont" !important; font-size: 100px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>
</head>
<body>
	<span class="iconfont">&#xe89a;</span>	
</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

注意:

  • @font-face中的url需要依据项目修改
  • 使用方式: <span class=“iconfont”>&#xe89a;</span>

2.线上引用

2.1 unicode引用

将本地使用代码中的@font-face进行替换即可
阿里iconfont使用方法

2.2 Font class形式引入:

阿里iconfont使用方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>iconfont的使用--线上引用</title>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_2686372_j1gr8zzfq9.css">
	<style> .iconfont { 
      font-family: "iconfont" !important; font-size: 100px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>
</head>
<body>
	<i class="iconfont icon-chazuo"></i>
</body>
</html>

在Vue中使用方法

<!--App.vue中引入样式文件,用线上链接即可-->
<style> @import "xxxxxxx/iconfont.css"; </style>

<!--class方式引用-->
<div class="iconfont icon-qianbao"></div>

2.3 symbol引用

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过,来调整样式。
  • 兼容性较差,支持 ie9+及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。

使用步骤:

1.第一步:拷贝项目下面生成的symbol代码:
阿里iconfont使用方法

<script src="http://拷贝的地址"></script>

2.第二步:加入通用css代码(引入一次就行)

<style type="text/css"> .icon { 
   
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3.第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

实例:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>iconfont的使用--线上引用</title>
	<script src="http://at.alicdn.com/t/font_2686372_j1gr8zzfq9.js"></script>
	<style src="text/css"> .iconfont { 
      font-family: "iconfont" !important; font-size: 100px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style>
</head>
<body>
	<svg class="icon" aria-hidden="true">
	    <use xlink:href="#icon-chazuo"></use>
	</svg>
</body>
</html>

文章链接: https://qw-null.github.io/2021/07/20/阿里iconfont使用方法/
★转载请注明来自 QW’s Blog!★

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/222953.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • hexdump用法_linux dump命令

    hexdump用法_linux dump命令本文乃fireaxe原创,使用GPL发布,可以自由拷贝,转载。但转载请保持文档的完整性,并注明原作者及原链接。内容可任意使用,但对因使用该内容引起的后果不做任何保证。作者:fireaxe_hq@hotmail.com博客:fireaxe.blog.chinaunix.net转自:http://blog.chinaunix.net/uid-20528014-id-4087756.html开发时经常会…

  • pix2pix模型(雪花算法原理)

    一、算法名称Pix2pix算法(Image-to-ImageTranslation,图像翻译)来源于论文:Image-to-ImageTranslationwithConditionalAdversarialNetworks二、算法简要介绍、研究背景与意义2.1介绍图像处理、图形学和视觉中的许多问题都涉及到将输入图像转换为相应的输出图像。这些问题通常使用特定于应用程序的算法来处理,尽管设置总是相同的:将像素映射到像素。条件对抗性网(cGAN)是一种通用的解决方案,它似乎能很好地解决各

  • 常用正则表达式合集,这一篇就够了!!(含完整案例,建议收藏)

    常用正则表达式合集,这一篇就够了!!(含完整案例,建议收藏)正是掌握了这些正则表达式,冰河平均每天比别人少写200行代码,极大的提高了研发效率,有了很多摸鱼的时间!!

  • 欢迎大家访问我的博客

    欢迎大家访问我的博客

  • VBoxManage命令详解技术文章[通俗易懂]

    VBoxManage命令详解技术文章[通俗易懂]薸泊`お甡VBoxManage命令详解技术文章VBoxManage[-v|-version]        显示virtualbox的版本号VBoxManage-nologo              隐藏logoVBoxManage-convertSettings     允许自动转换设置文件VBoxManage-convertSettingsBackup 允许自动转换设置文件,…

  • tga文件解析「建议收藏」

    Tga常见的格式有非压缩RGB和压缩RGB两种格式,文件的第三个Byte位作为标记:2为非压缩RGB格式,10为压缩RGB格式。这里的类只实现读取非压缩格式的tga文件。先给出tga文件的文件格式:名称偏移长度说明图像信息字段长度01本字段是1字节无符号整型,指出图像信息字段

发表回复

您的电子邮箱地址不会被公开。

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