HTML CSS字体图标库的引用及使用 SVG文件

最新推荐文章于 2024-06-24 10:48:15 发布
最新推荐文章于 2024-06-24 10:48:15 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： javaWeb html 文章标签： css html svg 图标设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45466657/article/details/104772119
版权
这篇博客介绍了如何从阿里妈妈矢量图标库中选择并使用SVG图标。步骤包括搜索图标，下载SVG文件，上传到项目，通过Font Class导入CSS，并在HTML中应用。博主分享了学习过程，欢迎同行交流和指正。
摘要由CSDN通过智能技术生成

1.进入图标库

阿里妈妈矢量图标库

2.搜索并下载想要的图标的SVG文件

在这里插入图片描述

3.创建一个新项目，点击上传图标至项目

在这里插入图片描述

4.拖入刚刚下载的图标对应的SVG文件

在这里插入图片描述

5.选择一种方式导入 我这里用的是Font Class 将其导入css至项目

在这里插入图片描述

<link rel
最低0.47元/天 解锁文章
AzH_597
关注
专栏目录
SVG 字体 – SVG 常用样式（17）
https://shixuebin.gitee.io/hexo-blog/
01-30 108
path元素和其它图形元素的CSS属性：CSS属性描述fill设置图形填充色设置图形的不透明度fill-rule设置图形的填充规则marker设置沿此形状边缘线的标记设置起始标记marker-mid设置中间段标记marker-end设置结束标记stroke设置图形的描边颜色设置描边虚线和间隔长度设置虚线描边偏移设置描边线头样式，有效值为roundbutt和square设置描边连接处长度设置描边的不透明度设置描边宽度设置文本渲染方式。
HTML中字体和字体图标的应用
qq_59746164的博客
08-20 761
1.字体应用 HTML中应用字体要用到font-fanily属性，定义一个名字，把要用到的字体.ttf格式下载到本地，用src属性使用字体。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
all.css小图标引用文档
03-22
css小图标
HTML(22)——字体图标
最新发布
m0_74386799的博客
06-24 610
字体图标：展示的是图标，本质是字体作用：在网页中添加简单的、颜色单一的小图标。
css引用 svg图标库,svg 图标文件引入小技巧
weixin_39527487的博客
08-03 4300
今天刚刚get到的一个小技能，忍不住想和大家分享一下，万一有同学不太懂，刚好也可以学习一下(ps：知道的同学可以帮我斧正，感谢！)。惯例，先来简单介绍一下 svg，虽然相信大家都懂????:svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。简单的说就是它是一种矢量图形，体积小，高保真，放大放小都不失真。直接引入...
Web前端之引入外部svg文件、解决若依框架无法使用img选入svg文件问题、Html引入svg文件、object标签、iframe标签、阿里巴巴尺量图、embed标签、等比缩放、解决裁剪、命名空间
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
11-24 2345
Web前端之引入外部svg文件、解决若依框架无法使用img选入svg文件问题、Html引入svg文件、object标签、iframe标签、阿里巴巴尺量图、embed标签、等比缩放、解决裁剪、命名空间
svg转字体图标 并引入使用
weixin_41411644的博客
06-28 1188
记录svg图片转字体图标并引入到项目中使用
package-icons:使用可用的css将svg图标打包到字体文件中
05-26
我们在开发的时候，UI大大会不停更新svg矢量图标，所以我们一次又一次地手动用 这个工具来更新图标的字体库。来一个，更新一次；来两个，更新一双；来三个……擦！终于有一天，怒了（不要问我是谁），总不能打UI大大...
CSS3 SVG网页加载图标动画特效
06-24
**CSS3 SVG网页加载图标动画特效详解** 在现代网页设计中，用户界面的交互性和视觉吸引力至关重要。"CSS3 SVG网页加载图标动画特效"是一种利用CSS3和SVG（Scalable Vector Graphics）技术来实现的动态加载图标效果...
CSS3 SVG新年喇叭闪烁动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建一个独特的新年喇叭闪烁动画特效。这个特效结合了SVG的矢量图形能力和CSS3的动画功能，为网页增添了一种富有节日气氛的视觉表现。 首先，SVG（Scalable Vector ...
svg-font:将svg文件转换为字体，将svg文件转换为字体。 FontForge脚本
03-13
svg2font ./src/build.sh svg图标转换为字体。 使用python脚本调用FontForge 请先安装FontForge。 也许您可以使用带有gulp插件gulp-iconfont / gulp-iconfont-css的yarn build构建。 将字体添加到svg文件（2021/13/03）
jQuery+CSS3+SVG手机端图标导航页面切换特效
06-05
在本文中，我们将深入探讨如何使用...`js`目录可能包含jQuery脚本文件，`fonts`目录可能用于存储SVG图标字体文件，而`css`目录则包含项目的CSS样式表。通过解压并查看这些文件，你可以更深入地理解这个特效的实现细节。
SVG 字体 – SVG image（14）
https://shixuebin.gitee.io/hexo-blog/
01-29 112
元素的属性指示文件(位图)的内容应显示在当前用户坐标系内的给定矩形(“窗口”)中。– 用于图像渲染的“窗口”的宽度和高度。对象中包含和渲染位图。它也可以显示图像格式。– 控制图像的缩放方式。– 图像左上角的坐标。
Web SVG字体（SVG fonts）图标
yaoyutian的博客
05-11 5629
SVG 单个svg文件，与svgfont文件不一样，svg字体是特殊处理的图标集合，像文字一样组合好后，会有Unicode代码点，一般用工具处理获得 下载SVG图标https://www.iconfont.cn/ 创建SVG fontshttps://icomoon.io/ 参考链接： 1.SVG fonts（SVG 字体）https://cloud.tencent.com/deve...
svg 文字使用
qq_27893011的博客
07-13 1804
svg 文字使用，主要为了兼容ie浏览器、ie内核的浏览器、游戏webview内核版本比较低端的内嵌页
字体格式类型(.eot/.otf/.woff/.svg)
weixin_30752377的博客
07-25 150
@font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。 @font-face文件 而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。 TrueType ...
react中使用svg作为字体图标,使用react-svg组件
m0_47531829的博客
04-23 5999
公司一直使用svg作为字体图标，从一开始我使用svg字体图标的方式也是通过img标签引入的，直到最近公司做的业务有个附件预览需求是这样的：展示几种不同的样式，当预览的附件里面没有数据和有数据的时候svg图标展示的样式不一样，鼠标移入的时候，又展示不同的样式图标，一开始感觉就是把所有要展示的svg图标切出来就行了，但是后来发现有几种图标没有， 如图，其中的模板有数据时，和鼠标经过-无数据悬停态的时候的svg图标没有，于是我和ui就去要了一下图标，但是ui说svg可以改颜色，并让我按照这个改下就行，不必要
css实现的svg路径动画html页面前端源码
mazai5080的博客
07-07 262
本源码编码：20219，需要的朋友，可以下载学习
引入字体图标使用svg为什么页面上不显示
04-01
可能是因为以下原因： 1. 检查SVG文件路径是否正确。如果文件路径不正确，则无法加载SVG图标。 2. 检查SVG文件本身是否存在问题。如果SVG文件本身存在问题，则可能会导致图标无法显示。 3. 检查CSS样式表是否正确。如果CSS样式表中存在错误，则可能会影响字体图标的显示。 4. 检查浏览器是否支持SVG。一些旧版本的浏览器可能不支持SVG图标。请确保您的浏览器支持SVG。 5. 检查字体图标库是否正确。如果您正在使用字体图标库，则请确保已正确安装并引入该库。 如果问题仍然存在，请检查您的代码并寻求帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值