【CSS】字体图标与favicon图标

字体图标:

美化网页的手段除了排版整洁以外，图片装饰也是必不可少的一部分，然而图片占用的内存相对较大，并且一旦确定图片以后想修改就只能换一张图片了，所以有时候我们可以用字体图标来代替一些非必须定制的小图片，例如我正在写博客的这个网页：

这一行的图标都可以用字体图标来展示。~~（但貌似csdn不是用字体图标）~~

总之字体图标很好用，看起来是图片，但本质是文字，所以可以调整大小、样式，甚至是颜色！

首先是需要下载：推荐这个网站，接下来也以这个网站的字体图标使用为例，但其他的字体图标也大同小异就是了。

Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/选好自己想要的图标以后点击生成字体。

再点击下载。

然后你就能得到一个压缩包，随便找个地方解压。

解压有这些东西

别的不用管，把font文件夹整个复制到HTML文件所在的文件夹内。

然后复制style.css文件的第一大段粘贴到html文件内：

然后打开demo.html文件开始挑选自己要的字体图标,复制小方框或者是字母加数字的那一串,但后面的小方框复制到IDEA里看不到~~(可能只有我的看不到),~~在浏览器里查看源码可以看到

复制后粘贴到需要使用的地方,并且需要把该地方的字体改成"icomoon"

即:

font-family:icomoon

例:

源代码:


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?8yaz8k');
            src: url('fonts/icomoon.eot?8yaz8k#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?8yaz8k') format('truetype'),
            url('fonts/icomoon.woff?8yaz8k') format('woff'),
            url('fonts/icomoon.svg?8yaz8k#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
 
        .text {
            font-family: icomoon;
            color: skyblue;
            font-size: 100px;
            margin-top: 30px;
        }
    style>
head>
<body>
<div class="text">div>
<div class="text">div>
<div class="text">div>
body>
html>

favicon图标:

就是网页标题的图标:

直接在head标签中加入link标签:

<link rel="icon" href="图片路径">

原本是要ico为后缀的图片才能的,刚才试了一下,jpg格式也可以直接使用了.

不过以防万一,留个转格式的网站吧

制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net轻松制作ico图标,在线提供ico图标转换工具,可以将jpg、jpeg、gif、png等图像转换成ico图像,方便浏览器制作并生成favicon.ico图标,提供ico图标下载,png to ico,jpg to ico,gif to icohttps://www.bitbug.net/

相关阅读:
图像处理ASIC设计方法笔记2 图像边界镜像处理
LT6211 双通道、可编程电源电流、轨至轨输出、电流反馈放大器
梯度下降、损失函数、神经网络的训练过程
LINUX异常栈初始化
Docker安装部署RabbitMq
PhalAPI学习笔记拓展篇 ———ADM模式中NotORM实现简单CURD
xiaodi-笔记
电机控制——PID参数理解
Spring中静态代理设计模式
vue.js毕业设计，基于vue.js前后端分离图书购物商城系统（H5移动项目）开题报告

原文地址：https://blog.csdn.net/m0_63235356/article/details/126401196