网站的icon图标与阿里云图标库的使用

最新推荐文章于 2025-05-12 09:42:57 发布

原创最新推荐文章于 2025-05-12 09:42:57 发布 · 3.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享 #html #css

文章目录

一、网站icon图标
二、图标库的引入
三、压缩图片

提示：以下是本篇文章正文内容，下面案例可供参考

一、网站icon图标

1.使用icon图标

例：

首先把favicon.ico （需要设置的图标）放到根目录下。
在html里面， head 之间引入。代码：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

2.制作icon图标

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

首先把我们想要的图标切成图片。
要把图片转换为 ico 图标，可以借助于第三方转换网站比特虫： http://www.bitbug.net/。如下：

3.注意

1.它是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片。
3. 位置是放到 head 标签中间。
4. 后面的type=“image/x-icon” 属性可以省略。
5. 为了兼容性，应将favicon.ico 这个图标放到根目录下。

二、图标库的引入

1.进入阿里云图标库主页

网址：https://www.iconfont.cn/

在这里插入图片描述

2.选择一种登录方式并登录

在这里插入图片描述

2.搜索图标并加入购物车

在这里插入图片描述
结果如下：

可以选择多个图标加入购物车，点击右上角的购物车图标，可以看到已选的图标：

主要介绍两种方式，（1）添加至项目（2）下载素材

添加至项目

（1）首先创建或选择一个项目：
在这里插入图片描述
（2）点击确定，跳到资源管理界面：

（3）点击生成代码，并复制代码：

（4）将代码粘贴在页面head区域的style标签中或写在外部css中，在head中通过link标签引入，例：

（5）在项目中使用：
点击图标上的复制代码
在这里插入图片描述
在项目中直接使用：

此时的图标更像文字，可以设置颜色、大小及是否加粗，注意要给使用icon的标签设置一个属性：font-family: ‘iconfont’，否则图标会不显示。例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       @font-face {
            font-family: 'iconfont';  /* project id 2429130 */
            src: url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.eot');
            src: url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.eot?#iefix') format('embedded-opentype'),
            url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.woff2') format('woff2'),
            url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.woff') format('woff'),
            url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.ttf') format('truetype'),
            url('//at.alicdn.com/t/font_2429130_2uokk6yl9qh.svg#iconfont') format('svg');
            }
        .icon{
            font-family: 'iconfont';  
            font-size: 50px;
            font-weight: bold; 
        }
    </style>
</head>
<body>
    <div class="icon">&#xe61b;&#xea54;&#xe62a;&#xe600;</div>
</body>
</html>