Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

[作業03] Font Awesome字型練習與應用

[作業03] Font Awesome字型練習與應用

1. 參照 
[講義] 製作


[講義] 使用圖示字體(icon font) Font Awesome
http://mepopedia.com/forum/read.php?804,87786


[hr]

2. 作業說明


1.可以作業一延續製作,將Font Awesome字型應用於其中

2.網頁內容若有涉及他人作品,請取得作者同意,或於footer註明,此網站為作業練習,如有侵權敬請告知


3.並回覆於本篇作業文章

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-105ooooo

(2).設計概念與製作心得:



3. 於作業一中修改練習


如加入分享連結圖示,並放大兩倍fa-2x

<i class="fab fa-facebook-square fa-2x"></i> <i class="fab fa-twitter-square fa-2x"></i><i class="fab fa-line fa-2x">
於標題中加入旋轉圖示
<i class="fas fa-spinner fa-spin"></i>


4. 上課影片


https://youtu.be/BrslTed-BB4





Edited 1 time(s). Last edit at 04/07/2018 01:16AM by JinJin.
(編輯記錄)

網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055448122


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445075
(2).設計概念與製作心得:利用深色的顏色系列,來突出韓風的感覺。再加上一些旋轉圖示以及分享連結圖示讓這個網頁更有生動感,但我一個問題就是分享連結圖示加了連結網址顏色就跑掉了,我也找不出要從哪裡改顏色。


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445036
(2).設計概念與製作心得:那個齒輪很像花所以就用了,但是實在想不到要放哪裡


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445039
(2).設計概念與製作心得:覺得小齒輪...等等 不太適合我的內容,故放嘞一些簡單的箭頭 spinning smiley sticking its tongue out

http://mepopedia.com/~web106-2c/hw03/hw03-1055445087

2.設計概念與製作心得:在主題的地方用了 一個可愛活潑的圖示來呼應蠟筆小新調皮的個性

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445177
(2).設計概念與製作心得: 覺得加了圖示變得比較趣味.不過圖示的顏色想了一下才知道是哪裡改。


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445004
(2).設計概念與製作心得:利用多個警告標示顯示出雲豹即將滅種的危機


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445186
(2).設計概念與製作心得: 放上小圖示覺得更有感覺,但是不知道fb和ig的圖示顏色該怎麼改!


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445054
(2).設計概念與製作心得:

版面配色黑紅為主,因為是楓葉 所以icon用可愛的葉子
不敢做太大 怕毀了整體感覺

http://mepopedia.com/~web106-2c/hw03/hw03-1055445033

2.設計概念與製作心得:與主題式蔬菜為主所以找葉子圖示放入標題 ,再加上一些旋轉圖示放到小段落前這樣畫面生動許多。



Edited 1 time(s). Last edit at 04/11/2018 10:55PM by 1055445033.
(編輯記錄)


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445021

(2).設計概念與製作心得:

以黑夜與白天所感受到不同光線來製作,黑夜由月亮代表、早晨則是由太陽做出。
圖示很可愛~~~但是蠻想知道為什麼有些網頁的圖示可以多加圓圈之類的東西,
是自己重新製作,還是可以直接在DW上加?


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445015

(2).設計概念與製作心得:

加了小圖示真可愛呢!


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445086
(2).設計概念與製作心得:soufflé 天子舒芙蕾,利用暖色系製造甜美可口的感覺 (圖示旋轉好好玩)


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445150
(2).設計概念與製作心得: 增加圖示讓畫面變很可愛,也簡單明瞭


(1) http://mepopedia.com/~web106-2c/hw03/hw03-1055445156
(2) 會動了! 加了圖示更棒哒



Edited 1 time(s). Last edit at 04/12/2018 12:08PM by 高慎妤.
(編輯記錄)


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445206
(2).設計概念與製作心得: 不知道該如何把圖示動起來


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445024
(2).設計概念與製作心得:經過反覆地摸索與練習,終於做出來了!!! 有了小icon,也讓整個網頁更完整了!

http://mepopedia.com/~web106-2c/hw03/hw03-1055445017/

設計概念與製作心得: 標題前加上旋轉圖示區分不同段落的感覺,還有放上一些適合原本風格的圖示,讓畫面變得不會那麼單調


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445003
(2).設計概念與製作心得: 覺得畫面變得更生動可愛了

1).網址: http://mepopedia.com/~web106-2c/hw03/hw03-1055445111
(2).設計概念與製作心得:好像沒有櫻花的圖示好可惜qq
但是多了圖示蠻好玩的
然後我明明有改圖片檔名還有把圖片縮小但是為什麼沒辦法像第一次作業一樣讀出來orz



Edited 1 time(s). Last edit at 04/19/2018 01:15AM by 1055445111.
(編輯記錄)

1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445144
(2).設計概念與製作心得:以葉子呼應內容


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-10555443135
(2).設計概念與製作心得:根据作业一改的,放假加生病作业欠了好多,哈哈~


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055443135
(2).設計概念與製作心得:

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445168
(2).設計概念與製作心得:加了小圖示感覺比較生動!

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445110
(2).設計概念與製作心得:
icon蠻有趣的,雖然中途有點不知道要放哪裡...不過最後多虧老師的影片

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445102



Edited 1 time(s). Last edit at 04/29/2018 02:25AM by 1055445102.
(編輯記錄)

1055445085 林安情

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445085


(2).設計概念與製作心得:摸索了有點久,但是實在想不出要放哪力就放在標題跟副標上。

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445059
(2).設計概念與製作心得:加會轉小圖很可愛,滿好玩的

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445042

(2).設計概念與製作心得 : 超簡單的作業,棒

網址:http://mepopedia.com/~web106-2c/hw03/hw03-1055445183
設計概念與製作心得:土色的感覺 然後小圖示很棒


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445182
(2).設計概念與製作心得: 邊看影片邊做,很有成就感。

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445205

(2).設計概念與製作心得:我覺得很多圖示很可愛,但是還是圈圈最可愛,所以我只用了那個。



Edited 1 time(s). Last edit at 05/02/2018 09:57PM by 1055445205.
(編輯記錄)


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1045445134

(2).設計概念與製作心得: 雖然一開始有點搞不懂,但我終於成功了

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445096
(2).設計概念與製作心得:我覺得會轉動的圖示真的很酷,以後有機會一定會應用在網頁上。

(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445119
(2).設計概念與製作心得:不知道為什麼第一個做的動畫也一起動了QQ無法讓它們和平共處


(1).網址: :http://mepopedia.com/~web106-2c/hw03/hw03-1055445060
(2).設計概念與製作心得:簡潔/電腦爛做網頁超級痛苦各種當機我都快要哭出來了