FONT AWESOME 免費的向量圖示字型

FONT AWESOME 免費的向量圖示字型

過去我們在處理網頁圖示 (Icon) 時,通常都會用圖片的方式來呈現,但這樣做有幾個缺點,一、圖檔的檔案較大,二、修改不易,三、一些常用如陰影之類的效果需要送 Photoshop 處理,四、點陣檔無法縮放。
Font Awesome 是一個 github 下的專案,他提供可縮放的向量圖示字型,使用上就像一般的字型,你可以透過簡單的 CSS 設定,來改變 Icon 的大小、顏色及各種 CSS 效果,為網頁增加趣味;它包含下列幾項優點:

幾個不常見的 HTML & CSS 效果

  1. 在 body 設定色彩,影響的範圍不只於內文文字,還包含影響下列的標籤
    • 圖像上的 alt 屬性
    • 列表元素的外框顏色 (border-color)
    • 列表的項目符號
    • hr 的顏色 (需設定 border-color:inherit; 且 IE 不支援)
  2. border 有下面幾種方式的簡寫
    • 邊框的粗細:border-width:5px 10px 15px 20px;
    • 邊框的樣式:border-style: solid dashed dotted double;
    • 邊框的色彩:border-color: red blue yellow green;
  3. word-wrap 自動折行:
    在處理連續無空格的英數字串時 (例如一個很長的網址),基於排版的需要,有時我們會希望把這個字串限制在一個固定大小的寬度中,這時我們就可以透過設定該容器的 word-wrap: break-word; 來達到這樣的效果。下面是範例:

    CSS:

    p.example{width:200px; border:#ccc 1px solid; padding:15px; word-wrap:break-word;}

    HTML:

    <p class=”example”>http://www.tt5.org/wordpress/css/example/word-wrap/</p>

    效果:

    http://www.tt5.org/wordpress/css/example/word-wrap/

  4. white-space 處理空白字元:
    空白/連續空白 Tab/連續 Tab 換行/連續換行
    normal 皆保留一個空白 皆替換一個空白 皆替換一個空白
    nowrap 皆保留一個空白 皆替換一個空白 皆替換一個空白
    pre 全部保留 全部保留 全部保留
    pre-wrap 全部保留 全部保留 全部保留
    pre-line 皆保留一個空白 皆替換一個空白 全部保留
    • 簡單的來說,normal 和 nowrap 都會把所有的格式轉換成一個空白,不論是空白、連續空白、Tab、連續 Tab、換行及連續換行皆轉換成一個空白,差異只在於 normal 支援自動換行,nowrap 則強制不可換行。
    • per 和 pre-wrap 則完整保留所有格式,pre-wrap 多了自動換行。
    • pre-line 則保留換行格式,且支援自動換行,其餘皆轉換成一個空白
  5. base 標籤:

    base 標籤放置在 head 標籤裡,可以設定的屬性有兩個,一個是 href,一個是 target,我比較常用的是 target,只要設定一次,整個網站的連結就可以直接套用,讓 HTML 的檔案看起更加精簡。

封面照片:

賴床

假日的早上本只想賴下床,好好替一個禮拜沒睡夠的覺補回來,就在床上換個姿勢想找個更舒服的位子繼續睡時,突然門鈴響了。

喔,是誰這麼掃趣!

不要理他,心中的小惡魔默默的把被頭更往上拉一點。

沒多久,又是一聲鈴響,隨著這鈴聲有個想法快速閃過,會不會是老媽買菜回來要找人幫忙提上樓?

HI~你們開學了

畢業兩個多月了~也慢慢習慣上班的作息~雖然有點無聊~平常除了去茶水間或廁所之外,幾乎是一到辦公室就整天坐在電腦桌前,與學校多變化的的生活節奏,差異頗大。這幾天騎往敦化南路的路上,學生突然多了起來,才突然想到,九月初因該是各個學校開學的日子。本來這個很熟悉的時間,突然變的陌生,還有點不太能適應;經過學校的時候,偶而會給他忍不住往裡面探看,看到裡面的小朋友在唱國歌、開朝會,想起以前自己最討厭開朝會,總想不出理由~為什麼要在大熱天,集合一群人聽台上的人講話,而且台上的人話還特別多,每次總會找很多理由想辦法溜掉;由於小時候還有點美術天份,會有一些美術公差可以出~我也樂著不用去開朝會,逃得心安理得,有點偷得半日閒的快樂,一方面也希望自己快點長大~因為長大後就可以不用開朝會了;沒想到上班後,公司每週一也要開一次週會,時間變了~地點變了~我也長大了,不變的是「台上的那個人話依然很多」,而我卻因為有責任了,沒辦法溜掉。快樂的美術公差VS無聊的上班族,成長真是一件有趣的事

原來我們什麼都不懂

中午的時候潘把全班都留下來開班會,討論畢籌的事情,因為現在已經大三了,有關畢籌的事,需要現在就開始 Run,才不會在大四的時候,將事情都擠在一塊,像是畢業展場尋找的問題,海報的設計,畢籌的企劃內容要先定案或是畢旅要去那裡什麼的…

開班會的時候,由於大家都只負責畢籌的一部份,不知道完整的畢籌內容是什麼?只知道潘把畢籌的注意事項一樣樣的列在白板上,一樣一樣解釋畢籌目前的 進度和接下來要做的事情時;感覺上,畢業對班上的其他人來說,還有點遠,彷彿只有管畢籌財物的同學在提醒大家要交畢籌基金的時候,大家還會意識到畢業的事 情;每當潘在台上解釋完某件事之後,問大家有沒有意見時,台下總還是一陣亂,真正認真去想潘提出來的問題的人,大概沒有幾個。

一直到潘要大家表決畢展主題時,玩一玩一個無俚頭的提議,才讓整件事情變的很不一樣

事情大概是這樣的,由於畢籌企劃要先交給學校過目,因此潘要大家決定出一個畢展的主題,好讓負責企劃的人可以依題目構思企劃。提案的時候,大家提出 很多題目,像是陽明山七十烈士,來象徵班上七十個同學,不過很快就被推翻,因為大家都不想當烈士給學弟妹瞻仰。喜歡表演行動藝術的仲,提一個「來三P吧」 的聳動題目,指我們是設計、美術、國畫三位一體。但被大家一陣瘋狂的嘲笑後不了了之,有人還要仲在展示會場表演三P的行動藝術;另外也有人提70共同體或 是三角形傳動等,都沒得到大多數同學的親睞。一直到喜歡玩3D的玩一玩提一個『40樸貨』這樣一個令人摸不著頭緒的題目時,竟意外地引起大家討論,因為沒 有人知道什麼是『樸貨』。潘請玩一玩自己解釋什麼是『樸貨』時,竟然連他自己也不知道什麼是『樸貨』,半天說不上來,最後還是潘幫他想一個解釋給解了危。

表決的時候,不知道是不是因為潘解釋的原因,玩一玩的『40樸貨』竟然得到超高票,得票數比其他選項的票數總和還多, 摔破大家的眼鏡,連潘在一邊統計票數的時候,都邊直呼意外!問其他同學們知不知道『樸貨』的意思時,沒有一個人知道,為什麼選這個題目?不知道!一個狀況外的人提了一個狀況外的題目,卻意外的成了我們畢展的主題,大概也沒人會在意要如何表現『樸貨』這樣的主題,沒有答案的答案,變成了大家最後的共識。

6 of 6
123456