如何引用阿里巴巴矢量图标库的图标

最新推荐文章于 2024-08-17 21:52:26 发布

西城xml

最新推荐文章于 2024-08-17 21:52:26 发布

阅读量3.5k

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/xichengqc/article/details/87257108

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

网页链接：https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=14726
选择自己喜欢的图标，添加入库
进入自己的库，点击下载代码
解压下载的压缩文件，找到.html文件，用浏览器打开，上面会介绍三种引用方式。
示例：（采用springboot搭建的项目，只需引入压缩包中的iconfont.css文件）

package com.xicheng.vue.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author xichengxml
 * @date 2018/12/20
 * @description
 */
@Configuration
public class SpringMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("icon").setViewName("icon");
    }
}

<!-- icon.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用阿里矢量图标</title>
    <link rel="stylesheet" type="text/css" href="/css/iconfont.css">
</head>
<body>
    <i class="iconfont icon-chunjishangxin-" style="color: #5daf34"></i>
</body>
</html>