如何在页面中使用svg图标
2024-08-28 10:05:23
1.svg图标长啥样
注意:图标的宽高无所谓,使用时可以根据需求修改,fill后面是颜色的填充,可修改图标颜色。
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
<path d="M941.248 352L672 82.752A64 64 0 0 0 626.752 64H128a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768
a64 64 0 0 0 64-64V397.248A64 64 0 0 0 941.248 352zM256 128h48v160H256V128z m112 0H512v160h-144V128zM256 896
v-192h512v192H256z m640 0h-64v-224a32 32 0 0 0-32-32H224a32 32 0 0 0-32 32v224H128V128h64v192a32 32 0 0 0 32 32
h320a32 32 0 0 0 32-32V128h50.752L896 397.248V896z" fill="#f06"/>
</svg>
2.使用svg图标
2.1将下载好的.svg文件或者自己制作的.svg文件放到项目目录下面。
2.2将 .svg 图标作为背景图使用:
#email {
background: url(./img/email.svg) 12px 7px no-repeat;
background-size: 20px 20px; // 在这设置图标大小,不设置就是svg默认的宽高
}
3.为什么使用svg图标?
这其实跟使用web字体图标(比如:font-awsome、iconfont)差不多,只是一个项目中使用的图标也就那几个,没有必要把所有的字体图标库文件全部加载下来(iconfont可以按照需要加载一定数量的字体图标,但是无论如何都需要引入字体库),二来还可以减少页面的标签数量。
如果项目中大量使用图标,建议使用字体库。毕竟单个使用图标还是有些麻烦。
最新文章
- Java常见问题
- MySQL5.6安装步骤
- Linux Shell 高级编程技巧1----深入讨论(awk、<;<;)
- gcc和g++
- ShareSDK集成微信、QQ、微博分享
- github注册使用以及体会
- js COOKIE 记住帐号或者uuid
- 【PHP代码审计】 那些年我们一起挖掘SQL注入 - 5.全局防护Bypass之宽字节注入
- php+gd库的源码安装
- C#学习笔记1:正则表达式和数据库连接
- kindle paperwhite2 root 密码修改方法
- sqrt和Hailstone
- QTP中FSO的使用
- ASP.NET内核几大对象、ASP.NET核心知识(7)--转载
- React Native for android 项目驱动教程
- hive metastore Server 出现异常
- iOS 让图片变模糊
- 主备(keepalived+nginx)
- June. 26th 2018, Week 26th. Tuesday
- Spring多线程批量发送邮件(ThreadPoolTaskExecutor)