打开demo_index.html会进入一个页面,点击Font class选择图标复制类名,类名为红框里面的.icon-unfold-more。 图标引用格式举例: 代码语言:javascript 复制 <iclass="iconfont icon-unfold-more"></i> 注意:第一个类名必须为:iconfont,第二个为图标的类名。
font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width:0.2px; -moz-osx-font-smoothing: grayscale;} 第三步:挑选相应图标并获取字体编码,应用于页面 <iclass="iconfont">3</i> font-class引用 font-class是unicode使用方式的一种变种,主要是解决unicode书写不...
1. font-class 引用 进入“我发起的项目”,选择项目,切换选项卡为“Font class” 点击“下载到本地”,下载一个压缩包,解压 压缩包内的文件有很多,但我们需要的只有: iconfont.css iconfont.ttf iconfont.woff iconfont.woff2 把上面四个文件放入项目 assets 下,可以分开放,也可以放在一起 把src 中的url 换成...
4 切换到Font class方式，点击“查看在线链接”，生成以下代码并复制：5 打开你的网页代码，添加link标签，将上面的代码粘贴到href属性下。注意需为路径添加“http：”字样。6 然后使用i标签引用图标。图标名称可以在iconfont“我的项目”中点击“复制代码”获取。<i class="iconfont icon-xxx"></i> 7 想要修改图...
一、Unicode引用 通过批量操作将图标添加至购物车，然后选择“添加至项目”，进入图标管理。在“我的项目”中选择Unicode栏，查看在线链接，生成代码拷贝至CSS文件，定义基本属性，最后在HTML中插入标签。二、font-class引用 步骤与Unicode引用类似，通过点击font-class生成在线链接，引入到HTML中。在HTML中引用...
<linkrel="stylesheet"href="//at.alicdn.com/t/font_666666229_gvtaaa7ta2w.css"> 使用图标 <i className={classnames('iconfont icontrash', styles.deleteStatusIcon)} /> 使用的效果和 ant design 的 Icon 组件很差不多。 最后 iconfont 的图表库可以线上获取,也可以下载到本地。外加上 iconfont 里面...
第一步:拷贝项目下面生成的fontclass代码: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.css 1. 第二步:挑选相应图标并获取类名,应用于页面: <i class="iconfont icon-xxx"></i> 1. 1.4symbol 引用 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章这...
第一步:引入项目下面生成的fontclass代码: 引入方式 第二步:挑选相应图标并获取类名,应用于页面: <i class="iconfont icon-xxx"></i> "iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。 3、symbol引用 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。
一、Unicode引用 二、font-class引用 三、symbol引用 Unicode引用 兼容性最好,支持IE6+。 支持font-size、font-color等字体的样式去修改大小和颜色等。 不支持多色图标,就算项目中引入多色图标也会自动转为单色图标(默认灰色) ps:如果后面突然又想要加图标了,没关系我们只用在线更新@fant-face{}内的css即可。有...
font-size: 2em; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> font-class引用封装 <template> <div> <span class="iconfont" :class="iconTag"></span> <slot></slot> </div> ...