當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

web常见几种处理图标方法【转】

發布時間：2025/6/15 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 web常见几种处理图标方法【转】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

方法一：

用background制作小圖標

像這樣，拿到設計稿后把所有的圖標放在一張圖片上，利用background-position、width、height來控制圖標的位置及大小。

代碼：

.icon{display:inline-block;background:url(../images/icon.png);} .icon1{background-position:0 0;width:16px;height:16px;background-repeat:no-repeat;position:absolute;top:6px;right:6px;} .icon2{background-position:-20px 0;width:41px;height:18px;margin:10px;} .icon3{background-position:-29px -41px;width:17px;height:9px;margin-left:10px;} .icon4{background-position:0 -21px;width:62px;height:14px;} .icon5{background-position:-65px 0;width:49px;height:49px;margin-top:5px;}

引用時：

優點：

圖片作為背景來顯示圖標，圖標的效果好，不容易出現鋸齒

缺點：

圖標大小及顏色難以控制，特別是調響應式時，大部分適用于pc端網站開發，移動端不建議適用

方法二：

簡單的圖標可用css繪制，比如：

<i class="box"> <s class="ico"></s></i> .box{display: block;width: 200px; height: 20px; background: gold; overflow: hidden; position: relative; top: 100px; left: 200px;/*控制小三角的位置*/ } .ico{ width: 100px; height: 100px; display: block; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border:5px solid #000 ; position : absolute; top:30px; left:20px;; }

*也可以使用偽元素:before/:after輔助繪制

優點：

比上一種方法節省空間，加載速度快

缺點：

大小不好控制，圖標僅限于簡單的，不能完成復雜的圖標繪制

方法三：

常用的字體圖標，例如像阿里圖標、Font Awesome等，以阿里圖標為例：

將你想要的圖標加入庫，點擊右上角的購物車形狀的圖標，彈出如下圖效果：

添加至你需要的項目里面，然后再到圖標管理-》我的項目里面去把剛下加入的圖標下載至本地：

把下載的解壓后，在你的項目里面新建個fonts的文件夾，把如下文件放進去：

在你的樣式文件中引用改字體圖標：

@import url("iconfont.css");

在需要調用這個圖標的地方插入html：

或者這樣

優點：

加載速度快，字體大小及顏色方便修改

缺點：

收字體大小的影響，字體圖標顯示的效果會有明顯的鋸齒

方法四：?

使用SVG。SVG是一種基于XML的圖形格式。這是一種可縮放的矢量圖形。SVG是由W3C制定的標準，在2003年成為了W3C的推薦標準。相比較其他的圖像格式，SVG的優勢在于：SVG可以被很多工具讀取和修改、SVG的尺寸更小、SVG圖像在任何的分辨率下都可以高質量地打印。

SVG的使用主要有如下方式：

1.img標簽直接引用

這種方式簡單，直接把SVG格式圖片看作為普通的圖片來引用。這種方式在實際的使用場景中應用不多。

2.內聯方式

IE9、Firefox、Opera、Chrome及Safari都支持內聯的SVG。IE8及以下版本瀏覽器可以通過安裝插件來支持SVG。內聯的SVG直接作為HTML文檔的一部分，不需要單獨請求。內聯的SVG使用上很不方便，如果在HTML中加入大段的SVG代碼，則很難維護，代碼也無法復用。

3.Data URIs

這種方式是把SVG文件直接轉成base64編碼格式，然后以Data URIs的方式引用。示例代碼如下：

.icon{background: url(data:text/svg+xml;base64,<base64 encoded data>) }

4.使用SVG中的<symbol>元素

使用 id 引用這個 SVG 中的 Icon 有兩種方式：

將上述 SVG 作為 body 的第一個元素插入在 HTML 中然后：

或者，講SVG保存成文件，以地址方式引用：

這種方式使用上跟img標簽沒有什么太大的差別了。好處在于所有的圖標都在一個文件中，因此只會請求一次。這種不需要像 Sprite 那樣繁瑣的設置圖片的位移。使用 id 命名圖標并使用時直接使用 id 引用既直觀又簡單。其靈活性和 Inline SVG 幾乎一樣——你可以設置顏色、邊線樣式、大小等等。視瀏覽器的不同，有時你需要使用作為 SVG 標簽的開始。

轉載于:https://www.cnblogs.com/liuyanxia/p/7448184.html

總結

以上是生活随笔為你收集整理的web常见几种处理图标方法【转】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：用python创建数据库监控平台(3)安
下一篇： Python机器学习--回归

编程问答

web常见几种处理图标方法 【转】

總結

web常见几种处理图标方法【转】