JSP 页面中引入 Iconfont 图标 - 详解

于小猿

于 2020-10-18 00:36:22 发布

阅读量3.7k

点赞数 5

分类专栏：笔记文章标签： java jsp html css intellij idea

本文链接：https://blog.csdn.net/YyjYsj/article/details/109140260

版权

笔记专栏收录该内容

54 篇文章 6 订阅

订阅专栏

1、进入阿里巴巴 Iconfont 图标官网：https://www.iconfont.cn/

2、在搜索框中搜索需要的图标，比如：对勾

3、将自己需要的添加入库

4、点击自己的图标库

5、选择添加至项目

6、点击下载至本地

7、下载后解压

8、不知道哪个有用哪个没用，就全部复制粘贴到项目中

9、新建一个JSP页面，在页面中引入CSS文件

<link rel="stylesheet" href="../fonts/iconfont.css">

但是需要引入自己项目中的 iconfont.css 文件，注意路径不要写错

10、添加图标（使用 i 标签或 span 标签）

<i class="iconfont icon-xxx"></i>

“iconfont”为固定关键字，“icon-xxx”为图标的 Font class 名称

在JSP页面中图标的位置的class中粘贴

<i class="iconfont icon-duigoutianchong-"></i>

11、代码效果：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="fonts/alibabafonts/iconfont.css">
</head>
<body>
<i class="iconfont icon-duigoutianchong-"></i>
</body>
</html>

12、这样还不行，还有最为关键的一步：

13、将复制的这段代码放到JSP页面中，注意前面一定要加上 http:

14、完整的JSP页面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="fonts/alibabafonts/iconfont.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2086392_ph73t3wx7jc.css"><%--这一行很重要--%>
</head>
<body>
<span class="iconfont icon-duigoutianchong-" style="color: green;"></span>
</body>
</html>

15、运行，看效果

于小猿

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
JSP 页面中引入 Iconfont 图标 - 详解

1、进入阿里巴巴 Iconfont 图标官网：https://www.iconfont.cn/2、在搜索框中搜索需要的图标，比如：对勾3、将自己需要的添加入库4、点击自己的图标库5、选择添加至项目6、点击下载至本地7、下载后解压8、不知道哪个有用哪个没用，就全部复制粘贴到项目中9、新建一个JSP页面，在页面中引入CSS文件<link rel="stylesheet" href="../fonts/iconfont.css">...
复制链接

扫一扫