网站LOGO
博客 | 棋の小站
页面加载中
2月21日
网站LOGO 博客 | 棋の小站
记录学习,心得,状态,生活。
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    使用图标为网页增添小细节
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    按住ctrl可打开默认菜单

    使用图标为网页增添小细节

    · 原创 ·
    学学编程 · 前端
    共 7253 字 · 约 4 分钟 · 405

    文章
    摘要

    在这篇博文中,作者分享了云笔记驱动从Docsify切换到Vuepress的经验,并详细介绍了使用Remixicon图标库的两种方法。首先,作者解释了直接使用SVG格式的方法,包括复制SVG代码和在矢量编辑器中编辑预览。然后,作者推荐了使用CSS和字体文件的方法,介绍了如何下载Remixicon的CSS文件和字体文件,并在HTML中引入以使用图标。文章强调了图标在网页设计中的重要性,并提供了实用的示例,展示了如何将图标应用于导航栏和列表。最后,作者表示将开展一个新的实用前端知识系列,以满足初学者对实际知识的需求。

    今天,我的云笔记驱动从Docsify换到了Vuepress,后者的优点是生态非常完善,有很多功能,但对新手非常不友好,需要具有一定的基础知识。在弄了一天半之后,它也算是正式上线了。和其他网页一样,这个网页中的图标使用的也是Remixicon图标库。我非常喜欢这个图标库,大多数用到图标的网页用的都是它。它的优点就是比例适合,线条优美,大小适中,图案形象,是我心中的第一图标库。访问我的云笔记

    最近也重新开始学习前端,由于我对前端已经有了一些基础,但只是理论上的学习,并没有真正用前端做一些项目,所以从今天开始更一些实用的前端知识。拒绝各种花哨的理论公式,脚踏实地地学习,才能有效率。我创建了这么久的博客,看过许多志同道合的朋友的文章,但是很多人的文章偏理论性都强一点。我觉得阅读博文的人群大多数都是初学者,都是抱着兴趣学习的,都是想学习到一些知识的,但那些文章理论太强,不能作为零基础学习的资料。有了以上想法,今天就开一个新系列,这个系列专门更新前端实用的知识。我希望即使零基础的读者,通过阅读这些文章,都会学到些什么。

    今天要学习的就是如何使用图标库。

    为什么要使用图标

    我觉得一个具有设计的网页,最不容忽视的一个细节就是图标。我喜欢具有图标的功能文字,比起单单的词语来说,在文字前面放一个图标可以让我看得更舒服。

    Vercel官网,红框内的就是图标Vercel官网,红框内的就是图标

    选择哪个图标库

    目前全球内可用的图标有很多,我最喜欢的就是Remixicon。除此之外,还有iconfontfontawesome,搜索icon就可以看到还有很多图标库。

    在谷歌搜索icon(图标库)在谷歌搜索icon(图标库)

    这里以Remixicon为例,演示如何在网页中使用图标。

    使用SVG格式

    什么是SVG?可缩放矢量图形(SVG)是一种Web友好的矢量文件格式。与JPEG等基于像素的光栅文件相反,矢量文件通过基于网格上的点和线的数学公式存储图像。(来源于https://www.adobe.com/creativecloud/file-types/image/vector/svg-file.html)它与我们熟知的JPG、JPEG、PNG、WEBP等图片格式不同,后者是以二维数组存储每一位置上像素的信息来记录图片的内容,而SVG是以一系列向量绘制而成的。我们可以使用矢量编辑器来绘制SVG格式的图像。相对于二位像素图像,矢量图像可以在不存在无关内容的情况下,只保留关键的线条,还能够不影响图像的精细程度。

    几乎全部的图标库都是以SVG格式绘制的,所以我们可以直接复制。

    直接复制SVG代码直接复制SVG代码

    复制完成后,我们可以直接前往支持编辑矢量文件的编辑器编辑并预览这些图标。

    编辑SVG图标编辑SVG图标

    从上图中可以看到,这些图标都是直接连接两个关键点来保证图片精细度的。

    这些图片也可以直接放在网页中,它完全可以使用HTML格式表示。实际上,SVG是基于XML的一种标记语言,用于描述矢量图片,而XML也是HTML格式的。因此可以直接将XVG代码复制到HTML中,让其成为文本的一部分。

    如上方图标的SVG代码如下。

    html 代码:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20ZM19 19V9.97815L12 4.53371L5 9.97815V19H19Z" fill="currentColor"></path></svg>

    可以看到,矢量图形包含svg标签和path标签,其中path标签就是绘制路径的标签。由于Remixicon的图标SVG和Path之间有一个奇怪的内边距,当你尝试让它和文字对齐时会出现高度不一致的问题。

    SVG和path之间有边距SVG和path之间有边距文字与SVG高度不一致文字与SVG高度不一致

    图中文字的行高、高度、文字大小都是100px,SVG的高度也是100px。

    上图的代码:

    html 代码:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            svg {
                width: 100px;
                height: 100px;
            }
            div {
                height: 100px;
                line-height: 100px;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
    <div>SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20ZM19 19V9.97815L12 4.53371L5 9.97815V19H19Z"
                  fill="currentColor"></path>
        </svg>
    </div>
    </body>
    </html>

    解决方法很简单,适当缩小文字的大小即可。

    如将上方的文字大小设为80px就和谐许多了。

    html 代码:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            svg {
                width: 100px;
                height: 100px;
            }
            div {
                display: flex;
                align-items: center;
                height: 100px;
                line-height: 100px;
                font-size: 80px;  /* 在这里更改文字大小 */
            }
        </style>
    </head>
    <body>
    <div>SVG<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20ZM19 19V9.97815L12 4.53371L5 9.97815V19H19Z"
                  fill="currentColor"></path>
        </svg>
    </div>
    </body>
    </html>

    使用CSS和字体文件使用图标

    我推荐使用这种方法在网页中加入图标。在Remixicon中可以下载到CSS文件和字体文件。

    下载CSS和字体文件下载CSS和字体文件

    下载后,解压,将CSS文件和字体文件放在同一级目录下,然后在HTML代码中使用link标签引入这个CSS即可。

    将CSS文件和字体文件移动过来将CSS文件和字体文件移动过来

    这里我只移动了一个字体文件,实际上只移动一个ttf文件也可以,但是remixion.css文件中也引入了其他字体文件,如果不删除这些没什么影响,至多就是控制台报错,删除即可。

    remixicon.cssremixicon.css

    然后就是在HTML代码中引入这个css文件。

    html 代码:
    <link rel="stylesheet" href="remixicon.css">

    在这里我将remixion.css放在和demo.html的同级位置了,开发中不推荐,这里只是演示。

    然后就是使用这个图标了。在你要设为图标的标签中添加一个class属性,值写你要设置的那个图标对应的值。

    比如这里我想设置之前的房子图标,它可以用作首页。点击后可以看到它提供的示例用法。

    示例用法(红框)示例用法(红框)

    我们将这个代码替换掉之前的SVG标签,并调整一下大小,让它们保持一致。

    html 代码:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="remixicon.css">
        <title>Document</title>
        <style>
            svg {
                width: 100px;
                height: 100px;
            }
            div {
                display: flex;
                align-items: center;
                height: 100px;
                line-height: 100px;
                font-size: 100px;  /* 这里改回去,仍然和高度一致 */
            }
        </style>
    </head>
    <body>
    <div>SVG<i class="ri-home-line"></i>
    </div>
    </body>
    </html>
    运行结果运行结果

    示例

    这里用第二种方法弄一个简单的列表。

    html 代码:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="remixicon.css">
        <title>Document</title>
        <style>
            ul {
                list-style: none;
            }
        </style>
    </head>
    <body>
    <ul>
        <li><i class="ri-home-line"></i> home-line</li>
        <li><i class="ri-home-2-line"></i> home-2-line</li>
        <li><i class="ri-home-3-line"></i> home-3-line</li>
    </ul>
    </body>
    </html>
    运行结果运行结果

    平时用这个装饰一下导航栏、列表,还是很实用的。

    声明:本文由 (博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    7

    条评论
    发一条!
    1. 头像
      龙鲲
      头像 龙鲲
      • 等级:Lv.2
      • 角色:访客
      • 在线:三月内

      fontawesome 这个用的人比较多,就是新版好像开始收费了

      · · · 湖南-邵阳
      1. 头像
        龙鲲

        官网有的时候老是进不去,图标倒是挺多。

        · · · 河北-秦皇岛
        1. 头像
          龙鲲
          头像 龙鲲
          • 等级:Lv.2
          • 角色:访客
          • 在线:三月内

          国内镜像站多,可以考虑使用国内的镜像

          · · · 湖南-邵阳
    2. 头像
      云晓晨CatchYun
      • 等级:Lv.5
      • 角色:首页 · 好友
      • 在线:本月

      小图标让网站变得更精致 😎

      · · · 山东-济南
      1. 头像

        是滴,看起来这个网站的作者是用心设计的。

        · · · 河北-石家庄
    3. 头像
      obaby
      • 等级:Lv.4
      • 角色:综合 · 好友
      • 在线:本月

      小图标现在还是蛮有必要的

      · · · 山东-青岛
      1. 头像
        obaby

        嗯呢,加一点点缀一下。

        · · · 河北-石家庄
    博客logo 博客 | 棋の小站 记录学习,心得,状态,生活。
    ICP 冀ICP备2023007665号

    🕛

    本站已运行 299 天 11 小时 39 分

    🌳

    建站:Typecho 主题:MyLife

    👁️

    今日访问量:1620 昨日访问量:1607
    棋の小站 © 2024.
    网站logo

    博客 | 棋の小站 记录学习,心得,状态,生活。
     
     
     
     
    壁纸