web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
图像/媒体
800个精美的免费SVG图标下载
分类：
图像/媒体
日期：
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### 作为图片使用 你可以将这些SVG图标作为普通的图片来使用。 ```html <img src="svg/si-glyph-bicycle-man.svg"> ``` ##### 作为内联SVG使用 或者你也可以直接拷贝某个SVG图标的内容到HTML中，作为内联SVG元素使用。 ##### SVG Sprite 使用SVG图标的最好的方法是 SVG sprite（SVG雪碧图）。 ```html <svg xmlns="http://www.w3.org/2000/svg" class="si-glyph-bubble-message-hi"> <use xlink:href="sprite.svg#si-glyph-bubble-message-hi" /> </svg> ``` 这个方法是使用<use>元素来连接到SVG雪碧图中的某一个SVG图标上，将它显示在页面中。 ##### SVG图标的CSS样式 使用内联SVG或雪碧图方式的SVG图标，你可以很容易的为图标添加CSS样式。这些图标都是精心制作的，你可以通过下面的方法非常容易的修改所有或部分图标的颜色。 ```html .si-glyph * { fill: red; } ``` ```html .si-glyph-bubble-message-hi { fill: blue; } ``` ##### 注意事项 目前，使用xlink方式使用的SVG元素不能够在webkit内核和IE浏览器中使用CSS来渲染。所以如果你要使用雪碧图（sprite）的方法来使用这些图标，需要在使用之前引入polyfill.js文件。该文件会修正webkit内核（如Chrome、Safari等浏览器）和IE浏览器的BUG，使SVG图标可以被CSS正常渲染。
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
