页面中图标的使用 - 要饭的-html教學-PHP中文網

首頁

web前端

html教學

页面中图标的使用 - 要饭的

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:35 AM

之前说要整理这块内容，分享给大家，工作原因，直到现在，赶上清明宅在家里，赶紧整理出来与大家分享。

精灵图（CSS sprite）
所谓精灵图，其实就是把几张图拼成一张图。从而在低并发的浏览器上达到快速传输并呈现内容的目的（减少请求）。

在用到这些图片的时候，需要引用整张图片然后设定坐标到需要的那张小图上。
还有就是：图片根据颜色分组，分成多个文件。每张图只有一种颜色，这样让每张图片变得更小。
当然，这根据当前项目来选择适于你的方案。主要根据下面两个属性来处理精灵图：

<span style="color: #008080;">1</span> <span style="color: #800000;">background-image: url("...</span><span style="color: #008000;">/*</span><span style="color: #008000;">.png");
</span><span style="color: #008080;">2</span> <span style="color: #008000;">background-position: 0px 0px;
</span><span style="color: #008080;">3</span> 
<span style="color: #008080;">4</span> <span style="color: #008000;">/* 注意：position的负值情况。 </span><span style="color: #008000;">*/</span>

先上几个图标网站，因为下面要介绍字体图标了：

字体图标在html中的使用

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">=""</span><span style="color: #0000ff;">><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="i-icon"</span><span style="color: #0000ff;">></span>﨡<span style="color: #0000ff;"></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 注意：&#xfa21; fa21为16进制 需要&#x </span><span style="color: #008000;">--><br></span></span></span></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;"> @font-face</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">      font-family</span>:<span style="color: #0000ff;"> "my-icon"
</span><span style="color: #008080;"> 3</span> <span style="color: #0000ff;">      src: url("..</span><span style="color: #008000;">/*</span><span style="color: #008000;">.eot");
</span><span style="color: #008080;"> 4</span> <span style="color: #008000;">           /* ie低版本浏览器需要加'?' 否则可能回报404错误 </span><span style="color: #008000;">*/</span> 
<span style="color: #008080;"> 5</span> <span style="color: #0000ff;">      src: url("../ *.eot?") format("embedded-opentype")
</span><span style="color: #008080;"> 6</span> <span style="color: #0000ff;">           ,url("../ *.woff") format("woff")
</span><span style="color: #008080;"> 7</span> <span style="color: #0000ff;">           ,url("../ *.ttf") format("truetype")
</span><span style="color: #008080;"> 8</span> <span style="color: #0000ff;">           ,url("../ *.svg") format("svg")</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">           font-weight</span>:<span style="color: #0000ff;"> normal</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">           font-style</span>:<span style="color: #0000ff;"> normal</span>;
<span style="color: #008080;">11</span>  }
<span style="color: #008080;">12</span> <span style="color: #800000;"> .i-icon</span>{
<span style="color: #008080;">13</span> <span style="color: #ff0000;">        font-family</span>:<span style="color: #0000ff;"> "my-icon"</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">        font-style</span>:<span style="color: #0000ff;"> normal</span>;
<span style="color: #008080;">15</span> <span style="color: #ff0000;">        font-weight</span>:<span style="color: #0000ff;"> normal</span>;
<span style="color: #008080;">16</span> <span style="color: #ff0000;">        font-size</span>:<span style="color: #0000ff;"> 26px</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">        -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">消除锯齿</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">18</span> <span style="color: #ff0000;">        -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">消除锯齿</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">19</span>  }

字体图标在css中的使用

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">i </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="icon icon-magic"</span><span style="color: #0000ff;">></span><span style="color: #800000;">i</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 直接引用class name </span><span style="color: #008000;">--></span></span></span>

<span style="color: #800000;">@font-face </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "myfont"</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;"> url("../ *.eot")</span>;<span style="color: #ff0000;">
    src</span>:<span style="color: #0000ff;"> url("../ *.eot?#iefix") format("embedded-opentype"), 
         url("../ *.woff") format("woff"), 
         url("../ *.ttf") format("truetype"), 
         url("../ *.svg") format("svg")</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;
  }<span style="color: #800000;">
  .icon </span>{<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;"> "myfont"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> normal</span>;<span style="color: #ff0000;">
    -webkit-font-smoothing</span>:<span style="color: #0000ff;"> antialiased</span>;<span style="color: #ff0000;">
    -moz-osx-font-smoothing</span>:<span style="color: #0000ff;"> grayscale</span>;
  }<span style="color: #800000;">
  .icon-magic:before </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> "\c210"</span>;
  }

各种方式对比

	精灵图	在html中	在css中
原理	使用图片定位	@font-face	@font-face
兼容	+	+	不支持低版本IE
维护成本	比较困难	简单	简单
颜色	丰富	色彩单一	色彩单一
缩放	失真	清晰	清晰

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

＆lt; datalist＆gt;的目的是什麼。元素？Mar 21, 2025 pm 12:33 PM

本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159

＆gt; gt;的目的是什麼元素？Mar 21, 2025 pm 12:34 PM

本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati

＆lt; meter＆gt;的目的是什麼。元素？Mar 21, 2025 pm 12:35 PM

本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前

視口元標籤是什麼？為什麼對響應式設計很重要？Mar 20, 2025 pm 05:56 PM

本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。

＆lt; iframe＆gt;的目的是什麼。標籤？使用時的安全考慮是什麼？Mar 20, 2025 pm 06:05 PM

本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。

我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？Mar 12, 2025 pm 04:05 PM

本文解釋了HTML5＆lt; time＆gt;語義日期/時間表示的元素。它強調了DateTime屬性對機器可讀性（ISO 8601格式）的重要性，並在人類可讀文本旁邊，增強Accessibilit

HTML5中跨瀏覽器兼容性的最佳實踐是什麼？Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐，重點是特徵檢測，進行性增強和測試方法。

如何使用HTML5表單驗證屬性來驗證用戶輸入？Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。