CSS引入阿里iconfont图标步骤

CSS引入阿里iconfont图标步骤

第一步

选择图标,选择添加入库
CSS引入阿里iconfont图标步骤_第1张图片

第二步

CSS引入阿里iconfont图标步骤_第2张图片
CSS引入阿里iconfont图标步骤_第3张图片
没有项目就新建一个项目
CSS引入阿里iconfont图标步骤_第4张图片

下载项目文件,复制粘贴到你的WEB项目目录中

CSS引入阿里iconfont图标步骤_第5张图片

回到网页,点击查看在线链接

CSS引入阿里iconfont图标步骤_第6张图片
CSS引入阿里iconfont图标步骤_第7张图片
复制代码到你的index.html
CSS引入阿里iconfont图标步骤_第8张图片

定义使用iconfont的样式

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

CSS引入阿里iconfont图标步骤_第9张图片

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

字体编码

CSS引入阿里iconfont图标步骤_第10张图片

全部代码如下



	
		
		
		
		
	
		
	
		
	

运行结果

CSS引入阿里iconfont图标步骤_第11张图片

参考
https://www.iconfont.cn/help/detailspm=a313x.7781069.1998910419.d8d11a391&helptype=code

你可能感兴趣的:(CSS引入阿里iconfont图标步骤)