阿里矢量图标_ui矢量图

全栈程序员-站长 • 2022年8月1日下午11:16 • 未分类 • 阅读 9

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

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

　　阿里iconfunt官网对于图标的调用写的不够详细，许多初用者不会用，下面具体介绍下总结的两种方法：

一、在线调用方式

1、首先建立新浪微博账号，用微博号登录iconfunt官网；　　

2、所需要图标加入购物车；
3、存储为项目；
4、获取在线链接、生成在线链接；
5、选择fontclass在线css模式；
6、把在线链接粘贴到link标签；
7、用.iconfont如上，在里边随意修改样式；
8、在html中需要的位置写<i class=”iconfont”>此处写图标的编号&#…;</i>；

demo：

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title></title>
<link href=”http://at.alicdn.com/t/font_1461119990_7929926.css” type=”text/css” rel=”stylesheet”/>
<style>

.iconfont{
font-family:”iconfont”;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px
}

</style>
</head>
<body>
<i class=”iconfont”></i>

</body>
</html>

二、离线调用方式

　　此方法需要本地下载iconfunt官网demo，然后如下，

切记要把demo里.ttf和.woff亮哥文件引入即可：

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>

@font-face {font-family: “iconfont”;
src: url(‘iconfont.eot?t=1461117480’); /* IE9*/
src: url(‘iconfont.eot?t=1461117480#iefix’) format(’embedded-opentype’), /* IE6-IE8 */
url(‘iconfont.woff?t=1461117480’) format(‘woff’), /* chrome, firefox */
url(‘iconfont.ttf?t=1461117480’) format(‘truetype’), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url(‘iconfont.svg?t=1461117480#iconfont’) format(‘svg’); /* iOS 4.1- */
}

.iconfont {
font-family:”iconfont” !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-icon1460345725196:before { content: “\e61d”; }
</style>
</head>
<body>
<div class=”box”>
<i class=”iconfont”>&#xe600</i>
</body>
</html>