在網頁設計中，圖標是很常見的元素，特別是在網站的導航欄中。有時候，我們需要在圖標和文字之間進行調換位置，這時候可以使用 CSS 來實現。接下來，我們就來介紹一種使用 CSS 實現圖標左右調換的方法。

.nav{
display: flex;
align-items: center;
justify-content: center;
}
.nav li{
display: flex;
align-items: center;
justify-content: center;
}
.nav li svg{
order: 2;
margin-left: 5px;
}
.nav li span{
order: 1;
margin-right: 5px;
}

首先，我們需要將導航欄的樣式設置為 flex 排列。這樣，圖標和文字的寬度是可以自適應的。我們使用 .nav 來表示導航欄。接下來，使用 .nav li 來設置每個導航欄元素的樣式，包括對齊方式和排列方式。

其中，我們使用 order 屬性來設置圖標和文字的排列順序。因為默認情況下，HTML 中先出現的元素在前面，后出現的元素在后面。這并不符合我們左右調換的需求。所以，我們利用 order 屬性來改變元素的排列順序。具體來說，如果我們需要將圖標放在文字的后面，則可以將圖標的 order 屬性設置為 2，文字的 order 屬性設置為 1。同時，我們還可以通過調整 margin 來設置圖標和文字的間距。

通過以上步驟，我們就可以輕松地實現圖標左右調換的效果了。這是一種比較簡單的方法，也可以根據實際情況進行修改。