【HTML + CSS】字体图标

最新推荐文章于 2024-06-24 10:48:15 发布
最新推荐文章于 2024-06-24 10:48:15 发布
阅读量879 收藏 7
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Whoopsina/article/details/105270334
版权
本文介绍了如何将字体图标应用于网页中，包括从icomoon和阿里icon font字库下载字体包，将fonts文件夹放入根目录，HTML中添加结构，样式中声明字体，以及如何追加新的字体图标。重点强调了字体文件路径的正确设置。
摘要由CSDN通过智能技术生成

推荐网站：

  • icommon字库: http://icommoon.io

  • 阿里icon font字库： http://www.iconfont.cn/

下载字体包

在这里插入图片描述
在这里插入图片描述

字体引入到HTML

得到压缩包之后，我们得知字体图标 本质就是 字体文件。 注意这个压缩包不要删掉，我们后面还有用的。

最后一步，是最重要的一步了， 就是字体文件已经有了，我们需要引入到我们页面中。

1. 首先把 fonts文件夹放入我们 根目录下

2. html标签内里面添加结构

最低0.47元/天 解锁文章
Whoopsina
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
html css led字体包
12-16
html led字体包
html 字体引入
Purgatory001的博客
07-15 2710
html 字体引入
HTML(22)——字体图标
最新发布
m0_74386799的博客
06-24 558
字体图标：展示的是图标，本质是字体作用：在网页中添加简单的、颜色单一的小图标。
html引入字体的方法归纳
m0_37828249的博客
07-19 4224
目前有三种方式：1、内联：在HTML标签内用style属性添加CSS，如：字体大小为12像素2、外联：在HTML的head区块内用...标签来添加CSS，如： .zt {font-size:12px}字体大小为12像素3、导入或链接：把CSS放入单独的文件，然后通过Import或Link连接到HTML内，如：@Import url("main.css");或
html引入字体
Whales_w的博客
12-28 636
@font-face { font-family:'MyNewFont'; src: url(../font/gothamrounded.otf); } //调用直接用上面定义的名字 font-family:'MyNewFont'
html中引入字体包
热门推荐
weixin_42400404的博客
05-10 1万+
1：下载字体包 之前在http://www.downyi.com/downinfo/181562.html 网站中下载过字体包。有的情况下会有附带插件。 2：字体包放在项目中 字体包存在项目文件中 3：新建font.css文件，在里面写入以下代码 @font-face { font-family: "HYLeMiaoTi"; //自定义字体名称 src:url("HYLeMiaoTiJ.ttf"); //字体包路径 font-wei.
html+css+js网页设计源代码.zip
05-31
"一个猫站"表明这个网页设计的主题围绕着猫，因此在HTML和CSS中可能会大量使用与猫相关的图像、图标和设计元素。JavaScript可能也用于实现与猫有关的互动，如模拟猫的行为或提供关于猫的趣味信息。 总的来说，这个...
美食网站js+html+css
01-03
5. 其他可能的文件：如字体文件（`.ttf`或`.woff`）、图标（`.svg`）等。 通过整合这些文件，开发者可以构建出一个功能齐全、视觉吸引人的美食网站，用户不仅可以浏览美食图片，还能了解菜品信息、查看评价，并可能...
web前端 html+css+js+jquery 网易云音乐官网模仿
06-27
在项目中，`css`文件夹包含了一系列CSS文件，如`style.css`等，它们定义了页面的颜色、字体、布局和响应式设计。例如，`display`属性控制元素的显示方式，`flexbox`或`grid`布局用于创建复杂的响应式布局，`@media`...
html+css+js防笔趣阁首页
03-23
标题“html+css+js防笔趣阁首页”揭示了这个项目是使用HTML、CSS和JavaScript这三种核心技术来实现一个与“笔趣阁”首页高度相似的页面。这个项目可能是为了学习、练习或者理解如何构建一个类似网站的前端部分。 1....
HTML5+CSS3期末大作业——城市简介源码
05-05
6. 字体图标（Font Awesome）：可能会使用图标字体库，如Font Awesome，来插入各种图标，提升网页的视觉表现。 7. 弹性盒模型（Flexbox）：通过设置容器的display属性为flex，可以方便地调整子元素的排列方式，实现...
HTML字体压缩
08-31
字体压缩 HTML
html引入字体包的方法
wxxmagic的博客
01-07 2364
@font-face { //这里定义你引入字体包的名称 font-family: 'mFontRegular'; src:url('字体包资源路径'); } html { width: 100%; height: 100%; position: relative; background-color: #000; //background-size: 100% auto; //background-position: top; fon
【HTML基础】字体引入 ——点滴积累大进步系列
码农小唛、
07-17 710
特殊字体的引入 1、找到适宜的字体文件（最好格式齐全）.ttf/.otf/.eot/.woff/.svg 而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。 参考地址 TrueType Windows和Mac系统最常用的字体格式，其最大的特点...
CSS Html 导入其它字体
前端技术
12-19 1015
CSS html 导入字体
html引入字体图标步骤
guinue的博客
04-23 2070
2.把下载好的fonts文件夹放在页面根目录下。3.引入字体图标（在css文件下）5.css文件 利用伪元素做。6.css文件下，定义字体。
html怎么引入字体库,CSS引入外部字体
weixin_34536454的博客
06-11 3872
语法： @font-face{font-family:name;src:url(url);sRules} 取值： name：字体名称。转自◎小黑路人xiaoho.com为什么会有这篇文章，外部引入样式有什么好谈的，不外乎就是Eclipse中打开已有的工程.其实就是工程的导入Eclipse中打开已有的工程.其实就是工程的导入::在开始使用Eclipse的时候，会发现一个问题，那就是如何打开一个现有的...
html如何添加字体
qq_43077362的博客
11-09 5381
1.添加普通字体：比如：font-family:,; 一般系统支持的网页常见中文字体有：宋体、雅黑、黑体。 body{font-size:14px;color:#333;background:#fff;font-family:"Times NewRoman","MicrosoftYaHei","simsun","HelveticaNeue",Arial,Helvetica,Georgi...
HTML页面 引入字体
m0_46296039的博客
10-15 1237
HTML页面 引入字体 在这里插入代码片 @font-face { font-family: ‘MyFontName’;/这里填写字体名/ src:url(’…/font/SourceHanSansCN-Regular.otf’); } body{ font-family:MyFontName; }
HTML5+CSS3企业网站实战教程
在**CSS重置及通用样式**部分，通常会设置全局的CSS规则，消除浏览器默认样式，例如设置html和body的margin、padding和border为0，并设定字体家族，如"Microsoft YaHei"。这样可以确保页面的基础样式一致。 **页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Whoopsina

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值