CSS圖標6宮格樣式是前端開發中常用的一種樣式方式，它能讓圖標更加精美，能夠更好地呈現網頁的美感和設計感。

.box{
display:flex; /* 使用flex布局 */
justify-content:space-between; /* 將寬度平均分配 */
align-items:center; /* 使圖標垂直居中 */
width:500px; /* 設置寬度（根據實際情況調節）*/
margin:0 auto; /* 水平居中 */
}
.item{
width:80px; /* 設置單元格寬度（根據實際情況調節）*/
height:80px; /* 設置單元格高度（根據實際情況調節）*/
border-radius:50%; /* 將單元格變為圓形 */
background-color:#eee; /* 設置背景色（根據實際情況調節）*/
display:flex; /* 使用flex布局 */
justify-content:center; /* 將子元素水平居中 */
align-items:center; /* 將子元素垂直居中 */
}
.item i{
font-size:40px; /* 設置字體大小（根據實際情況調節）*/
color:#666; /* 設置字體顏色（根據實際情況調節）*/
}
.item:hover{
background-color:#666; /* 當鼠標懸停時，修改背景色（根據實際情況調節）*/
}
.item:hover i{
color:#fff; /* 當鼠標懸停時，修改字體顏色（根據實際情況調節）*/
}

實現方式非常簡單，只需要通過在一個容器中使用flex布局，在單元格中使用圓形并設置hover樣式即可實現。關于鼠標懸停時的顏色變化，可以根據個人喜好進行調節。

總之，CSS圖標6宮格樣式不僅可以美化網頁，還能提高用戶體驗，讓網頁看起來更加專業和精致。