前端学习——ico图标与字体图标

前端学习——ico图标与字体图标

目标：

• 能会引入ico图标

• 能使用字体图标

  1. ico图标

  在网站的首页加上/favicon.ico 可以获取不同网站的ico图标

  1). 使用ico图标

  • 首先把favicon.ico 这个图标放到根目录下。

  • 再html里 head 之间 引入 代码。

     <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>     
  

  2). 制作ico图标

  自己做的图片，转换为 ico图标，以便放到我们站点里面。

  方法步骤：

  • 首先把我们想要的切成图片。

  • 要把图片转换为 ico 图标，我们借助于第三方转换网站：

    http://www.bitbug.net/

  总结：

  代码：  <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>     
  

  注：

  1. 是显示在浏览器中的网页图标。
  2. 它是图标形式（ico），不是图片
  3. type=“image/x-icon” 属性可省略
  4. 因为兼容性，favicon.ico 图标多数放到根目录下

  ​

  2. 字体图标

  图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，降低网页的性能。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。字体图标（iconfont)可以解决.

  2.1 字体图标优点

  可以做跟图片一样的事情,改变透明度、旋转度，等..
  但本质是文字，可以随意的改变颜色、产生阴影、透明效果等等...
  本身体积更小，但携带的信息并没有削减。
  几乎支持所有的浏览器
  ...
  

  2.2 设计字体图标

  在 illustrator 或 Sketch 软件里创建 icon图标保存为svg格式再进行使用，svg文件需要转换成字体文件

  2.3. 下载字体图标

  ​ 推荐网站：

  ​ http://icomoon.io

  ​ http://www.iconfont.cn/ （阿里 免费 免费下载字体图标）

  2.4. 字体引入到HTML

  得到压缩包之后，获得的字体图标 本质就是 字体文件。 注意这个压缩包不要删掉，后面还有用，字体文件引入到页面中，首先把 fonts文件夹放入根目录下 ，在压缩包中会有demo.html文件，打开demo文件复制图标，进行html标签内里面添加结构如下：

   <span></span>  
  

  1. 在样式里面声明字体： 告诉别人我们自己定义的字体(一定注意字体文件路径的问题)

    	//字体名称为icomoon
  

  @font-face {
    
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?7kkyc2');
    src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
      url('fonts/icomoon.woff?7kkyc2') format('woff'),
      url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  

  4. 给盒子使用字体,还可以对字体进行css样式的更改

  span {
  		font-family: "icomoon";
  	}
  

  2.5. 追加字体图标

  如果原来的字体图标不够用了，需要添加新的字体图标，但是原来的不能删除，需要继续使用，此时我们需要把压缩包里面的selection.json 重新上传导入到连接中，然后，选中自己想要新的图标，重新下载压缩包，替换原来文件即可。

  ​

  ​

  ​