CSS中的edit-icon是一個常用的圖標，用于表示可以編輯或修改的內容。它可以是一個簡單的筆形圖標或其他的可視化表示。

.edit-icon {
background-image: url('edit-icon.png');
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
}

在上述代碼中，使用了一個名為edit-icon.png的圖像作為背景圖片，在樣式中設置了該圖標的寬度和高度，同時使用了inline-block屬性使其可以作為行內元素使用，而vertical-align屬性則用于對齊該元素的垂直方向的位置。

此外，在使用edit-icon時還可以使用偽元素來創建更多的樣式效果，例如懸停和點擊狀態的樣式，以及將圖標與其他文本或元素組合起來。

.edit-icon:hover {
transform: rotate(90deg);
}
.editable::after {
content: 'Edit';
margin-left: 5px;
display: inline-block;
vertical-align: middle;
font-weight: bold;
color: #888;
}

在上述代碼中，使用了:hover偽類來為edit-icon添加當鼠標懸停時旋轉圖標90度的效果。而在.editable的子元素后面使用::after偽元素來添加文本，并使用display屬性將其設置為行內塊元素，以與edit-icon等高，并與其垂直居中對齊。