CSS是一種用于網頁設計的語言，它可以控制網頁的布局、字體、顏色、邊距等各個方面。在網頁設計中，CSS被廣泛應用。下面我們來看一下如何用CSS來實現博客的右上角圖標。

首先，在HTML中創建一個div元素，然后使用CSS來控制它的大小、位置、邊框等屬性。以下是相關代碼：

<div class="blog-icon">
</div>
.blog-icon {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #F2F2F2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

上面的代碼中，我們創建了一個class為“blog-icon”的div元素。使用position屬性使它定位在頁面的固定位置，top和right屬性設置它在右上角的位置。width和height屬性設置div元素的大小，border-radius屬性設置圓角，background-color屬性設置背景顏色，box-shadow屬性設置陰影。

接下來，我們在div元素內部添加一個鏈接，讓它指向我們的博客頁面。以下是相關代碼：

<div class="blog-icon">
<a >
<i class="fa fa-pencil"></i>
</a>
</div>
.blog-icon a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
font-size: 24px;
color: #444;
}
.blog-icon a:hover {
color: #F2F2F2;
background-color: #444;
}
.blog-icon i {
font-size: 24px;
}

上面的代碼中，我們在class為“blog-icon”的div元素內部添加一個a元素。使用display、justify-content、align-items屬性使鏈接居中顯示，寬高設置為100%，字體大小設置為24px，字體顏色為深灰色。

使用:hover偽類為鏈接添加鼠標懸浮時的顏色和背景色。后面的代碼設置圖標的字體大小。

這樣，我們就成功地使用CSS實現了博客的右上角圖標。如果需要更換圖標，只需要更改鏈接內部的元素即可。