阿里字体图标之Symbol用法
第一步:下载阿里字体图标Symbol文件包并解压。
第二步:把压缩后的文件全部放入自己的项目文件中。
第1步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第2步:加入通用 CSS 代码(引入一次就行):
<style>
.iconfont {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>
第3步:挑选相应图标并获取类名,应用于页面:
<svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>
第三步:#icon-xxx改为其中需要用的哪个图标:例如下面一个#icon-position
完整代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="fonts/iconfont.js"></script><style>.iconfont {width: 1em;/*可以改变数字来进行改变字体图标的大小*/height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head><body><div><svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-position"></use></svg></div>
</body></html>
阿里字体图标之Symbol用法相关推荐
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- 字体图标之Symbol用法
<link rel="stylesheet" type="text/css" href="../iconfont2/iconfont.css&q ...
- 如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地 然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...
- uni-app之阿里字体图标转base64方法
uni-app之阿里字体图标转base64方法 uni-app开发过程中发现小程序端不能直接使用字体图标,需先转成base65方可使用,转换方式如下. 一.转换步骤 1.1 从iconfont下载字体 ...
- react引入阿里字体图标iconfont
移动端开发过程中,字体图标几乎是不可缺的,本文将介绍如何使用阿里字体图标,已方便练手的时候使用. 第一步:制作字体图标 1.首先进入阿里巴巴矢量图网站:http://www.iconfont.cn/ ...
- 【uniapp引入阿里字体图标】
uniapp引入阿里字体图标 引入阿里字体图标 引入阿里字体图标 链接奉上 uni-app字体图标 阿里图标官网 nvue中不可直接使用 css 的方式引入字体文件,需要使用以下方式在 js 内引入. ...
- Web网页字体图标的基本用法
目录 前言 字体图标本质是字体. 字体图标引入方式 前提: 第一种 使用类名引入字体图标 调用图标对应的类名,必须调用2个类名 第二种 使用unicode编码 1.直接在标签内部放入一个编 ...
- vue中 使用element-ui 图标和阿里字体图标结合使用
vue中 使用element-ui 图标和阿里字体图标结合使用 1 登录阿里字体图标官网 2 图标管理 --> 我的项目 --> 创建一个项目 3 开始搜有想要的图标添加到我的项目中 4 ...
- 在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
最新文章
- Linux常用命令--网终设置
- JAVA 代码里中文乱码问题
- Visual Studio 2010 Express for Windows Phone Key!
- 如何安装_毛巾架如何安装
- 10-对象实例化、内存布局与访问定位
- 【Java多线程】高级主题:定时调度、quartz、指令重排、volatile、ThreadLocal
- SAP Analytics Cloud里看到的SAP C4C的query列表,是从哪里取出来的
- Java 默认/缺省 内存大小,如果没有 -Xms -Xmx
- 故障分析:数据库一致性关闭缓慢问题诊断
- csrf攻击ajax,如何在使用ajax post时处理CSRF攻击?
- Reactor模型-单线程版
- 冠状病毒主题网页制作——疫情地图
- 推荐10款实用必备的Windows10软件
- Flash 第二篇 AS影片剪辑
- ubuntu/debian-bluster 用python安装 sasl 报错解决
- MATLAB强化学习实战(十一) 使用自定义训练循环训练强化学习策略
- 互联网创业公司的经理​其实最主要是一个产品​经理
- 新浪小编为您介绍留声机的古与今
- 居中小圆点 html,居中小圆点怎么打出来
- 国内首个基于Windows操作系统的GPU高性能计算集群研制成功