icomoon加圖標(biāo)/修改網(wǎng)頁圖標(biāo)/Google Font改字體

暑假在家開通了阿里云輕量服務(wù)器,學(xué)生認(rèn)證之后每個月只要9.5 (可以百度“云翼計劃”)。域名正在注冊中,阿里云的網(wǎng)站上指導(dǎo)說明非常詳細(xì),可以說是傻瓜式教學(xué)了,一步步照著做完全沒問題。

開通之后可以選擇阿里云提供的這些應(yīng)用鏡像,如下圖。

選好了之后隨時都可以換的。我最開始選的是wordpress(最適合新手),搗鼓了幾天,感覺自己在玩qq空間,只能在它提供的模板上修改,寫文章、加圖片啥的。我還沒強(qiáng)大到能夠修改它的模板,或者自己創(chuàng)建一個,所以我放棄了wp。

接著我又研究了一下其他的幾個,LAMP, Drupal, node.js,ASP/.NET都試了一遍。本小白在這里給自己掃個盲:Drupal和wordpress是一類的,都屬于CMS(content management system),功能比wp多,也比wp難上手;Node.js是JavaScript的運(yùn)行環(huán)境,讓JS可以在服務(wù)端,而不是瀏覽器端運(yùn)行,它不是JS框架,也不像jQuery哦;ASP.NET 是一個開發(fā)框架,用于通過 HTML、CSS、JavaScript 以及服務(wù)器腳本來構(gòu)建網(wǎng)頁。我自己覺著ASP.NET 應(yīng)該是最適合我學(xué)習(xí)的:有難度,而且以后我自由發(fā)揮的空間很大。

然鵝我現(xiàn)在用的是LAMP(因為以前上課老師提到過LAMP所以很快我就上手了! )。因為域名還沒注冊下來,現(xiàn)在只能拿ip地址自娛自樂一下~下面進(jìn)入正題,介紹我新學(xué)會的三個美化網(wǎng)站的方法。

1.?icomoon:常見圖標(biāo)大全


在主頁點(diǎn)"icomoon app",然后出現(xiàn)的頁面上,有兩種情況可選擇:

1. 添加icomoon網(wǎng)站上沒有的圖標(biāo),比如我想加入一個簡書app的圖標(biāo),可以點(diǎn)擊我畫圈圈的"1":

這個時候需要上傳svg格式的文件,到哪去找svg格式的圖標(biāo)呢?阿里圖庫? 推薦這個網(wǎng)站,搜索"簡書"的結(jié)果如下,下載svg格式的。



2. 點(diǎn)擊我畫圈圈的"2", 加入網(wǎng)站自帶的圖標(biāo),其實這個網(wǎng)站上已經(jīng)有很多好看的圖標(biāo),有免費(fèi)有付費(fèi)的,如下圖所示


選好了之后,進(jìn)入最后一步,下載生成的字體庫,以及在html頁面的代碼的說明。


另外,在css文件里加上

@font-face {

? font-family: 'icomoon';

? src: url("../fonts/icomoon/icomoon.eot?srf3rx");

? src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"),

? ? ? ? url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"),

? ? ? ? url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"),

? ? ? ? url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");

? ? font-weight: normal;

? ? font-style: normal;

}

注意url的路徑,就是剛剛下載的壓縮包的路徑。至于在css和html頁面怎么使用,可以看壓縮包里的style.html的源代碼。

2. 修改網(wǎng)頁圖標(biāo)

哈哈哈這個更簡單了但是看著好玩啊,在html頁面加入這一行代碼就行了:........(簡書粘不了html代碼???)

效果圖是這樣的


3. Google Fonts

又是傻瓜操作,有很多高大上的字體,想用哪個就點(diǎn)紅色加號,然后如圖二,把代碼復(fù)制粘貼到自己的網(wǎng)站就行。我用校園網(wǎng)上google沒問題,不過不知道出了學(xué)校的話還能不能用了。

最后截一張本人還在緩慢學(xué)習(xí)以及修改中的網(wǎng)站...圖標(biāo)、字體均來自于本文提到的網(wǎng)站,希望本渣渣可以堅持下去成為前端小能手。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 學(xué)會使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,445評論 2 66
  • @font-face是CSS3中的一個模塊,他主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中,隨著@font-fac...
    我是強(qiáng)強(qiáng)閱讀 834評論 0 0
  • 一不小心就到了第10天,十分之一應(yīng)該是一個小的節(jié)點(diǎn)。給自己賞朵花花。 《高效演講》 1-演講的開頭:要有一個“干凈...
    瀟華閱讀 329評論 1 2
  • 和那首歌里唱的一樣:“像一陣細(xì)雨灑落我心里?!蹦憔拖褚魂嚰?xì)雨突然出現(xiàn)在了我的生活中,舒服自然,但是又不顯得...
    韻然瞅瞅閱讀 178評論 0 0
  • 好心情,就是一種正能量,可以使人精神煥發(fā),信心倍增,每天用一份好心情對待自己,對待別人,對待自己周圍的每一件事,...
    RainyCai閱讀 220評論 0 1

友情鏈接更多精彩內(nèi)容