99人精品福利在线观看,伊人青青操

技術(shù)頻道 - html技術(shù)

SVG圖標(biāo)：icon-home【代碼】

作者:admin 時(shí)間:2022-11-28 17:41:31 瀏覽:

本文介紹一個(gè)在網(wǎng)頁設(shè)計(jì)中比較常用的首頁圖標(biāo)(icon-home)，一些人可能會(huì)選擇用字體圖標(biāo)如FontAwesome來實(shí)現(xiàn)，不過本文介紹的是用SVG來實(shí)現(xiàn)的方法，好處是，不用附帶加載一大堆字體文件，也不用配置Web服務(wù)器添加某些映射腳本。

有兩種寫法，一種是把SVG代碼寫在HTML代碼里，另一種寫法是把SVG代碼寫到一個(gè)獨(dú)立的文件里，然后在HTML代碼里引用該文件。

方法一：不用獨(dú)立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的代碼設(shè)置圖標(biāo)(icon)的大小，width: 1em; 和 height: 1em;，也可設(shè)置圖標(biāo)的顏色，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>

demo download

方法二：使用獨(dú)立SVG文件

我們可以把SVG代碼獨(dú)立成一個(gè)文件，然后在HTML代碼里引用。

svg文件

首先，創(chuàng)建一個(gè)SVG獨(dú)立文件，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>

demo download

總結(jié)

本文介紹了SVG實(shí)現(xiàn)的圖標(biāo)：icon-home，有兩種寫法，一種是把SVG代碼寫在HTML代碼里，另一種是把SVG代碼獨(dú)立用一個(gè)文件，然后在HTML代碼里引用。個(gè)人建議用獨(dú)立SVG文件，因?yàn)楦镁S護(hù)，HTML代碼也更簡(jiǎn)潔了。

另外要說的是，本文只介紹了一個(gè)SVG圖標(biāo)，要想獲得更多的SVG圖標(biāo)，可看此文《逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載》。

相關(guān)文章