天天看點

Atom飛行手冊翻譯: 3.6 圖示圖示

圖示

Atom自帶了

Octicons

的圖示集。使用它們來添加圖示到你的包中。

使用方法

Octicons在Atom中的使用方法不同于

标準用法

。最大的不同是圖示class的名字。你應該使用更加通用的

icon icon-

字首,而不是

octicon octicon-

字首。

例如,要想添加

monitor圖示

,在你的标記中使用

icon icon-device-desktop

class:

<span class="icon icon-device-desktop"></span>           

或者你可以像這樣使用

SpacePen

@span class: 'icon icon-device-desktop'           

尺寸

Octicons在

16px

font-size

下最美觀。通常條件下就是這樣使用的,是以你不用擔心。如果你更喜歡不同的圖示尺寸,嘗試使用16的倍數(比如

32px

或者

48px

)來顯示得更清晰。在此之間的尺寸也可以,但可能對于一些帶直線的圖示會顯示得很模糊。

易用性

雖然圖示會讓你的UI更具有視覺感,不和文本标簽一起使用的時候,就很難猜出它的意思。對于空間不足以放下文本标簽的情況,考慮放置一個滑鼠覆寫時顯示的

提示框

。或者一個更巧妙的

title="label"

屬性也會有所幫助。

繼續閱讀