脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 前端iconfont两种方式

前端iconfont两种使用方式举例详解

 更新时间：2025年01月21日 09:37:20   作者：普通网友  
这篇文章主要介绍了一种流行的网页图标解决方案Iconfont的相关资料,包括创建项目、添加图标、下载代码、在项目中使用Iconfont和自定义图标样式等步骤,需要的朋友可以参考下

Iconfont 是一种非常流行的网页图标解决方案，它将图标字体化，使得图标可以像文字一样方便地使用和样式化。

步骤 1：创建项目并添加图标

1.创建项目：

  • 在 Iconfont 网站上，点击“我的项目”。
  • 点击“新建项目”，为你的项目命名并创建。

2.添加图标：

  • 在 Iconfont 网站上搜索你需要的图标。
  • 将你需要的图标添加到购物车。
  • 进入购物车，选择“加入项目”，选择你刚刚创建的项目

步骤 2：下载项目代码

  • 下载代码：
  • 进入“我的项目”页面，选择你创建的项目。
  • 点击“下载代码”，选择“Font Class”下载格式（推荐）。
  • 下载并解压文件，你会得到一个包含 CSS 文件和字体文件的压缩包。

步骤 3：在项目中使用 Iconfont

  • 引入 CSS 文件：
  • 将下载的 CSS 文件（通常名为 iconfont.css）和字体文件（通常在 font 文件夹中）放入你的项目目录中。
  • 在你的 HTML 文件中引入 iconfont.css 文件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
</head>
<body>
    <!-- 图标示例 -->
    <i class="iconfont icon-example"></i>
</body>
</html>

2.使用图标：

  • 在 HTML 文件中使用 <i> 标签并添加相应的类名来显示图标。
  • 类名格式通常为 iconfont icon-图标名称。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <style>
        .icon {
            font-size: 24px; /* 设置图标大小 */
            color: #333;    /* 设置图标颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <i class="iconfont icon-example icon"></i>
    <i class="iconfont icon-user icon"></i>
    <i class="iconfont icon-settings icon"></i>
</body>
</html>

步骤 4：自定义图标样式

  • 更改图标大小和颜色：
  • 通过 CSS 可以轻松更改图标的大小和颜色。
.icon {
    font-size: 32px; /* 图标大小 */
    color: #ff6600;  /* 图标颜色 */
}

2.悬停效果：

  • 你可以添加悬停效果来增强用户体验。
.icon:hover {
    color: #ff0000; /* 悬停时的颜色 */
}

css使用整体示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <link rel="stylesheet" href="path/to/iconfont.css" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
    <style>
        .icon {
            font-size: 32px; /* 图标大小 */
            color: #333;    /* 图标颜色 */
            margin: 10px;
        }
        .icon:hover {
            color: #ff0000; /* 悬停时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <i class="iconfont icon-example icon"></i>
    <i class="iconfont icon-user icon"></i>
    <i class="iconfont icon-settings icon"></i>
</body>
</html>

下面是iconfont.js ，也就是JS的使用方式

添加图标步骤同上

步骤 1：获取 iconfont.js 链接

  • 进入项目页面：
  • 在“我的项目”页面，选择你创建的项目。

2.获取 iconfont.js 链接：

步骤 2：在项目中使用 iconfont.js

  • 引入iconfont.js文件：
  • 在你的 HTML 文件中引入 iconfont.js 文件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="path/to/iconfont.js"></script>
</head>
<body>
    <!-- 图标示例 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

2.使用图标：

  • 在 HTML 文件中使用 <svg> 标签和 <use> 标签来引用图标。
  • xlink:href 的值格式为 #icon-图标名称。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="https://at.alicdn.com/t/font_1234567_abcd1234.js"></script> <!-- 替换为你的 iconfont.js 链接 -->
    <style>
        .icon {
            width: 32px;  /* 图标宽度 */
            height: 32px; /* 图标高度 */
            fill: #333;   /* 图标颜色 */
            margin: 10px;
        }
        .icon:hover {
            fill: #ff0000; /* 悬停时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-settings" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

步骤 3：自定义图标样式

  • 更改图标大小和颜色：
  • 通过 CSS 可以轻松更改图标的大小和颜色。
.icon {
    width: 48px;  /* 图标宽度 */
    height: 48px; /* 图标高度 */
    fill: #ff6600;  /* 图标颜色 */
}

2.悬停效果：

  • 你可以添加悬停效果来增强用户体验。
.icon:hover {
    fill: #ff0000; /* 悬停时的颜色 */
}

JS使用方式完整示例

通过上述步骤，你可以在前端项目中轻松使用 iconfont.js 图标。以下是完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iconfont Example</title>
    <script src="https://at.alicdn.com/t/font_1234567_abcd1234.js"></script> <!-- 替换为你的 iconfont.js 链接 -->
    <style>
        .icon {
            width: 48px;  /* 图标宽度 */
            height: 48px; /* 图标高度 */
            fill: #333;   /* 图标颜色 */
            margin: 10px;
        }
        .icon:hover {
            fill: #ff0000; /* 悬停时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 使用图标 -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-example" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-user" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-settings" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
</body>
</html>

总结 

到此这篇关于前端iconfont两种使用方式的文章就介绍到这了,更多相关前端iconfont两种方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 浅析JavaScript中的CSS属性及命名规范

    浅析JavaScript中的CSS属性及命名规范

    这篇文章主要介绍了JavaScript中的CSS属性及命名规范。需要的朋友可以过来参考一下，希望对大家有所帮助
    2013-11-11
  • js实现连续英文字符自动换行兼容ie6 ie7和firefox

    js实现连续英文字符自动换行兼容ie6 ie7和firefox

    英文字符自动换行,通过js脚本截断字符串,此方法通用ie6,ie7,firefox，使用CSS控制强制换行实现不了的朋友可以尝试下
    2013-09-09
  • 一步一步教你写淡入淡出带注释的图片轮播插件（一）

    一步一步教你写淡入淡出带注释的图片轮播插件（一）

    抽空写了个类似的效果，做了一定程度的封装，虽然也只能勉强算个轻量级原生小插件吧，但还是分享出来，并做一步一步的教程，希望能给有需要的朋友一些帮助吧。
    2010-10-10
  • JS 添加删除元素的实现代码

    JS 添加删除元素的实现代码

    JS添加删除元素，非常不错的应用，需要的朋友可以参考下。
    2009-08-08
  • 微信小程序实现全国机场索引列表

    微信小程序实现全国机场索引列表

    这篇文章主要为大家详细介绍了微信小程序实现全国机场索引列表，实现MUI索引列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01
  • jsvascript图像处理—(计算机视觉应用)图像金字塔

    jsvascript图像处理—(计算机视觉应用)图像金字塔

    上一篇文章，我们讲解了边缘梯度计算函数，这篇文章我们来了解图像金字塔;图像金字塔被广泛用于计算机视觉应用中;图像金字塔是一个图像集合，集合中所有的图像都源于同一个原始图像，而且是通过对原始图像连续降采样获得的
    2013-01-01
  • JS简单获取当前年月日星期的方法示例

    JS简单获取当前年月日星期的方法示例

    这篇文章主要介绍了JS简单获取当前年月日星期的方法,结合完整实例形式分析了javascript基于自定义函数获取当前日期时间的方法,涉及javascript中Date()类的使用与日期相关运算技巧,需要的朋友可以参考下
    2017-02-02
  • 使用Echarts绘制一个多组折线图

    使用Echarts绘制一个多组折线图

    这篇文章主要给大家介绍了关于使用Echarts绘制一个多组折线图的相关资料,Echarts是一个功能强大的可视化库,可以用来绘制各种类型的图表,包括多组折线图,需要的朋友可以参考下
    2023-09-09
  • javascript 鼠标滚轮事件

    javascript 鼠标滚轮事件

    由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
    2009-04-04
  • Promise 链式调用原理精简示例

    Promise 链式调用原理精简示例

    这篇文章主要为大家介绍了Promise 链式调用原理精简示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12

最新评论