icomoon加图标/修改网页图标/Google Font改字体

暑假在家开通了阿里云轻量服务器，学生认证之后每个月只要9.5 （可以百度“云翼计划”）。域名正在注册中，阿里云的网站上指导说明非常详细，可以说是傻瓜式教学了，一步步照着做完全没问题。

开通之后可以选择阿里云提供的这些应用镜像，如下图。

选好了之后随时都可以换的。我最开始选的是wordpress（最适合新手），捣鼓了几天，感觉自己在玩qq空间，只能在它提供的模板上修改，写文章、加图片啥的。我还没强大到能够修改它的模板，或者自己创建一个，所以我放弃了wp。

接着我又研究了一下其他的几个，LAMP, Drupal, node.js,ASP/.NET都试了一遍。本小白在这里给自己扫个盲：Drupal和wordpress是一类的，都属于CMS(content management system)，功能比wp多，也比wp难上手；Node.js是JavaScript的运行环境，让JS可以在服务端，而不是浏览器端运行，它不是JS框架，也不像jQuery哦；ASP.NET 是一个开发框架，用于通过 HTML、CSS、JavaScript 以及服务器脚本来构建网页。我自己觉着ASP.NET 应该是最适合我学习的：有难度，而且以后我自由发挥的空间很大。

然鹅我现在用的是LAMP(因为以前上课老师提到过LAMP所以很快我就上手了! ）。因为域名还没注册下来，现在只能拿ip地址自娱自乐一下~下面进入正题，介绍我新学会的三个美化网站的方法。

1. icomoon:常见图标大全

在主页点"icomoon app"，然后出现的页面上，有两种情况可选择：

1. 添加icomoon网站上没有的图标，比如我想加入一个简书app的图标，可以点击我画圈圈的"1"：

这个时候需要上传svg格式的文件，到哪去找svg格式的图标呢？阿里图库  推荐这个网站，搜索"简书"的结果如下，下载svg格式的。

2. 点击我画圈圈的"2"， 加入网站自带的图标，其实这个网站上已经有很多好看的图标，有免费有付费的，如下图所示

选好了之后，进入最后一步，下载生成的字体库，以及在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. 修改网页图标

哈哈哈这个更简单了但是看着好玩啊，在html页面加入这一行代码就行了:........（简书粘不了html代码？？？）

给大家看看效果图，哈哈哈真好玩

3. Google Fonts

又是傻瓜操作，有很多高大上的字体，想用哪个就点红色加号，然后如图二，把代码复制粘贴到自己的网站就行。我用校园网上google没问题，不过不知道出了学校的话还能不能用了。

最后截一张本人还在缓慢学习以及修改中的网站...图标、字体均来自于本文提到的网站，希望本渣渣可以坚持下去成为前端小能手。