技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

SVG图标:icon-home【代码】

作者:admin    时间:2022-11-28 17:41:31    浏览:

本文介绍一个在网页设计中比较常用的首页图标(icon-home),一些人可能会选择用字体图标如FontAwesome来实现,不过本文介绍的是用SVG来实现的方法,好处是,不用附带加载一大堆字体文件,也不用配置Web服务器添加某些映射脚本。

 

有两种写法,一种是把SVG代码写在HTML代码里,另一种写法是把SVG代码写到一个独立的文件里,然后在HTML代码里引用该文件。

方法一:不用独立SVG文件

HTML(SVG)

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
    <title>home</title>
   <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>

CSS

body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-home {
  color: red;
  font-size: 48px;
}

代码解释

可以通过CSS的代码设置图标(icon)的大小,width: 1em;height: 1em;,也可设置图标的颜色,color: #444444;

完整HTML

<html>
<head>
<title>SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-home {
  color: red;
  font-size: 48px;
}
</style>
</head>

<body>
<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
  <title>home</title>
  <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
  </defs>
</svg>

<svg class="icon icon-home"><use xlink:href="#icon-home"></use></svg><span> icon-home</span>
  
</body>
</html>

demodownload

方法二:使用独立SVG文件

我们可以把SVG代码独立成一个文件,然后在HTML代码里引用。

svg文件

首先,创建一个SVG独立文件,symbol-defs.svg,代码如下:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-home" viewBox="0 0 1024 1024">
   <title>home</title>
   <path class="path1" d="M512 96l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 512c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
    </symbol>
  </defs>
</svg>

HTML代码

<html>
<head>
<title>SVG Icons</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
  body {
  font: 32px sans-serif; color: #444;
  margin: 1em;
}
.icon {
  display: inline-block;
  color: #444444;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.icon-home {
  color: red;
  font-size: 48px;
}
</style>
</head>

<body>

<svg class="icon icon-home"><use xlink:href="symbol-defs.svg#icon-home"></use></svg><span> icon-home</span>
  
</body>
</html>

demodownload

总结

本文介绍了SVG实现的图标:icon-home,有两种写法,一种是把SVG代码写在HTML代码里,另一种是把SVG代码独立用一个文件,然后在HTML代码里引用。个人建议用独立SVG文件,因为更好维护,HTML代码也更简洁了。

另外要说的是,本文只介绍了一个SVG图标,要想获得更多的SVG图标,可看此文《逾千个SVG/PNG常用矢量图标(含HTML代码)免费下载》。

相关文章

标签: SVG  CSS图标  
x
  • 站长推荐
/* 左侧显示文章内容目录 */