javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 前端iconfont两种方式

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

作者:普通网友

这篇文章主要介绍了一种流行的网页图标解决方案Iconfont的相关资料,包括创建项目、添加图标、下载代码、在项目中使用Iconfont和自定义图标样式等步骤,需要的朋友可以参考下

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

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

1.创建项目

2.添加图标

步骤 2:下载项目代码

步骤 3:在项目中使用 Iconfont

<!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.使用图标

<!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:自定义图标样式

.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

<!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.使用图标

<!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:自定义图标样式

.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两种方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文