css-spring、svg-spring

简介: css-spring、svg-spring

一、spring技术

1.1,传统的spring,图标图形整合在一起,实际呈现的时候准确显示特定图标。

1.2,这里所说的Sprite技术,没错,类似于CSS中的Sprite技术。

二、iconfont

iconfont-阿里巴巴矢量图标库

官网了解一下,大致情况就是上传、下载这么简单;

下载后的文件包括这么多,既包括项目常用的css文件,也有我们svp-spring想要的js文件

三、基于iconfont的css-spring/fontclass

3.1,引入css文件

3.2,绑定class

四、基于iconfont的svg-spring/symbol

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

支持多色图标了,不再受单色限制。

通过一些技巧,支持像字体那样,通过font-size,color来调整样式。

兼容性较差,支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般,不如png。

4.1,引入js文件

4.2,绑定id

 

五、svg-spring原理及优势

iconfont的使用方法_cocytus-CSDN博客_iconfont 使用

未来必热:SVG Sprites技术介绍 « 张鑫旭-鑫空间-鑫生活

关键词:svg-spring、svgsymboluse

六、效果

七、欢迎交流指正,评论留言。

相关文章
|
6月前
|
JavaScript Java 对象存储
Spring Boot集成Tinymce富文本编辑器
Spring Boot集成Tinymce富文本编辑器
141 1
|
4月前
|
Java 数据处理 Spring
Spring Boot中的模板引擎选择与配置
Spring Boot中的模板引擎选择与配置
|
5月前
|
前端开发 Java Spring
Spring Boot中使用Thymeleaf进行页面渲染
Spring Boot中使用Thymeleaf进行页面渲染
|
5月前
|
存储
多文件上传的实现-Spring24
多文件上传的实现-Spring24
|
6月前
|
XML 前端开发 Java
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
Spring Boot的Web开发之Thymeleaf模板引擎的解析及使用(Thymeleaf的基础语法以及常用属性)
132 0
|
前端开发 JavaScript Java
Spring Boot整合Thymeleaf模板引擎
Spring Boot整合Thymeleaf模板引擎
205 0
Spring Boot整合Thymeleaf模板引擎
|
测试技术
|
前端开发 Java Spring
Spring Boot - Thymeleaf 模板布局
Spring Boot - Thymeleaf 模板布局
Spring Boot - Thymeleaf 模板布局
|
前端开发 JavaScript Java
Spring Boot - Thymeleaf 参考手册
Spring Boot - Thymeleaf 参考手册
Spring Boot - Thymeleaf 参考手册
|
前端开发 Java Spring
Spring Boot - Thymeleaf常用语法
Spring Boot - Thymeleaf常用语法
Spring Boot - Thymeleaf常用语法