在Web開發(fā)中，CSS是不可缺少的一部分，HTML定義了網頁結構，而CSS則決定了網頁的展示效果。在實際開發(fā)中，我們經常需要使用圖例（icon）來美化網頁。下面將介紹CSS圖例的使用。

首先，我們可以使用CSS中的偽元素（pseudo-element）來創(chuàng)建圖例。偽元素是指CSS中沒有對應HTML元素的元素，常用的偽元素有“::before”和“::after”。例如，我們要在頁面中添加一個包含文字和圖例的按鈕：

.btn {
background-color: #007bff;
color: #ffffff;
padding: 10px;
position: relative;
}
.btn::before {
content: "";
width: 20px;
height: 20px;
background-image: url("icon.png");
background-repeat: no-repeat;
background-position: center center;
position: absolute;
left: -30px;
top: 50%;
transform: translateY(-50%);
}

上述代碼中，我們使用了偽元素“::before”來添加圖例。首先，我們設置了元素的寬度和高度，然后指定了圖例的背景圖片。接著，我們將該元素定位為絕對定位，并將其向左移動了30個像素，并且將其垂直居中。最后，我們使用了CSS3中的transform屬性來將該元素在垂直方向上向上移動了50%的高度。

另外，我們還可以使用CSS中的字體圖標（icon font）來創(chuàng)建圖例。字體圖標是一種可以用字體來描述圖標的技術，常見的字體圖標庫有FontAwesome和Iconfont。例如，我們可以使用FontAwesome庫中的圖標來添加圖例：

上述代碼中我們使用了FontAwesome圖標庫中的“heart”圖標來創(chuàng)建圖例。在HTML中，我們定義了一個“i”標簽，并給它添加了“fa”和“fa-heart”兩個類名。在CSS中，我們引入FontAwesome的樣式文件，然后設置“i”標簽的字體、顏色和大小。

總之，無論是使用偽元素還是字體圖標，都可以幫助我們輕松地創(chuàng)建圖例，增強網頁的美觀性和用戶體驗。