iconfont阿里巴巴图标unicode使用方法

1、登录iconfont-阿里巴巴矢量图标库

2、搜索图标iconfont阿里巴巴图标unicode使用方法_第1张图片

 3、选择图标,添加购物车

iconfont阿里巴巴图标unicode使用方法_第2张图片

4、将购物车中的图标加入项目

iconfont阿里巴巴图标unicode使用方法_第3张图片

5、找到我的项目,将图标下载到本地,得到一个压缩包iconfont阿里巴巴图标unicode使用方法_第4张图片6、 将压缩包解压到项目当中,并在项目中引入icon font.css文件

iconfont阿里巴巴图标unicode使用方法_第5张图片

7、在项目的css文件夹下新建一个 iconfont.css,并在项目中引入

iconfont阿里巴巴图标unicode使用方法_第6张图片

在 iconfont.css中引入

iconfont阿里巴巴图标unicode使用方法_第7张图片

其中地址要指向fonts文件夹下的文件,例如

@font-face {font-family: 'iconfont';

src: url('../fonts/iconfont.eot');

src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/iconfont.woff') format('woff'),

url('../fonts/iconfont.ttf') format('truetype'),

url('../fonts/iconfont.svg#iconfont') format('svg'); }

然后再定义使用iconfont的样式:

iconfont阿里巴巴图标unicode使用方法_第8张图片

.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;} 

8、挑选相应图标并获取字体编码,应用于页面

3

你可能感兴趣的:(html,大数据,html)