Web前端系列课程：CSS319字体图标

新知榜官方账号

2023-11-10 02:28:13

Web前端系列课程：CSS319字体图标

本文介绍了CSS319字体图标的优点和使用方法，以及推荐了几个常用的字体图标生成网站。

CSS319字体图标的优点

CSS319字体图标可以做出跟图片一样可以做的事情，比如改变透明度、旋转度等，但本质其实是文字，可以很随意的改变色、产生阴影、透明效果等等。它的体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药。

CSS319字体图标的使用方法

按照如下流程：

设计字体图标。如果图标是我们公司单独设计，那就需要UI设计人员在illustrator或Sketch这类矢量图形软件里创建icon图标，比如下图：

上传生成字体包。当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。推荐网站：icomoon.io、iconfont.cn、Fontello、Font-Awesome。
下载字体图标。刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了。如果不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。
复制需要的字体文件。在样式里面声明字体，告诉别人我们自己定义的字体，然后给盒子使用字体，最后盒子里面添加结构before的方法。
追加新图标字体的方法。如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要把压缩包里面的selection.json重新上传，然后选中自己想要新的图标，重新下载压缩包，替换原来文件即可。

本页网址：https://www.xinzhibang.net/article_detail-19523.html

寻求报道，请

关键词

分享至微信：

相关工具

美图推出的AI海报设计工具，一键生成海报宣传图

Microsoft Designer

微软推出的在线设计海报和宣传图工具

阿里云智能logo设计

阿里云推出的智能Logo设计

稿定AI

一站式AI创意工具集合，AI绘图、场景生成，商品合成

Illustroke

AI SVG矢量插画生成工具

AIDesign

腾讯推出的免费AI Logo在线设计工具

CorelDRAW和Adobe Illustrator之间的比较

CorelDRAW和Adobe Illustrator之间的比较CorelDRAW和Adobe Illustrator是常用的平面绘图矢量软件。本文对比了它们的软件定位、侧重点和发展方向，总结出它们的优劣，并提供使用建议。软件定位不同Adobe Illustrator软件是美国Adobe公司出品的，

分类标签 CorelDRAWAdobeIllustrator矢量软件

12-04 06:14

三款AI绘图工具的优缺点比较

三款AI绘图工具的优缺点比较在近年来的发展中，AI绘图工具在设计领域中得到了广泛的应用。本文将重点介绍三款常见的AI绘图工具，分别是Adobe Illustrator、Sketch和Figma，它们各自的优缺点以及在设计领域中的应用。1. Adobe IllustratorAdobe Illustr

分类标签 AI绘图工具AdobeIllustratorSketchFigma

12-04 06:13

如何选择一款适合自己的调色软件？

如何选择一款适合自己的调色软件？世界上的色彩千千万，科技的发展也使得曾经简单的黑白转变为上千万甚至上亿像素的色彩，这样让更多的人通过屏幕了解到世界上各种美好的事物~但是！尽管屏幕上的色彩更加细腻多样了，但终究还是无法与人眼相媲美。例如眼睛看到的与拍下来的景色之间相差了一层梦幻的“滤镜”，而这层“滤镜

分类标签调色软件摄影后期LUTs

11-30 02:23

荣耀Magic4系列发布，适合商务人士使用的手机

荣耀Magic4系列发布，适合商务人士使用的手机荣耀Magic4系列是一款很适合商务人士使用的手机，其外观配色设计和系统功能支持和配色也都非常亮眼。本文详细介绍了荣耀Magic4系列的设计、配色、屏幕、系统等方面的特点和优势。荣耀Magic4系列包含了多种配色，包括瓷青、流金、亮黑、釉白四种颜色，P

分类标签荣耀Magic4系列手机商务人士

11-30 02:22

DaVinci Resolve - 专业影视后期处理软件

DaVinci Resolve - 专业影视后期处理软件DaVinci Resolve是一款专业的调色软件，将专业8K编辑,色彩校正,视觉效果和音频后期制作等功能集于一体的影视后期处理软件。广泛应用在影视后期,栏目包装,宣传片、广告片等领域。该软件的调色页面设有全新HDR面板，可让您创建自定义色调范

分类标签 DaVinciResolve影视后期处理调色软件

11-30 02:21

电影感的塑造——从后期调色说起

电影感的塑造——从后期调色说起电影感的塑造，离不开构图、景深、分辨率、镜头运动，今天就单从后期调色来说，怎么使自己拍的片子，瞬间赋予“电影感”。导入素材，回批，调色，输出，就是几个简单的操作步骤，但是背后暗藏玄机。调色的意义，不外乎两种，一是提升画面品质，二是增加氛围感受。以《爱乐之城》为例，其实体

分类标签电影感后期调色构图

11-30 02:20

荣耀Magic3系列手机影像系统

荣耀Magic3系列发布以来，荣耀水桶机这个称呼已经是荣耀Magic3系列手机的大众评价了，因为其均衡的配置受到了众多消费者的好评。不少消费者入手了这一款手机除了体验高端的旗舰配置，还有其强大的影像系统。在2021年的9月份荣耀召开了发布会，宣布在荣耀Magic3系列加入了计算摄影技术，也就是多主摄

分类标签荣耀Magic3系列影像系统多主摄融合计算摄影

11-30 02:19

视频翻译：使用MyHeyGen免费翻译任意时长视频

视频翻译：使用MyHeyGen免费翻译任意时长视频近期，一款名为“视频翻译”的工具引起了广泛关注。这不是一个简单的网页应用，而是一个可以免费部署在个人电脑或服务器上的实用程序。它的强大之处在于能够翻译任意时长的视频内容。所谓的视频翻译，实际上是指同声传译。虽然这类工具并非近期才问世，市场上已有多款成

分类标签视频翻译MyHeyGen免费

11-28 08:59

如何查找和选择齿轮图标-完全指南

如何查找和选择齿轮图标-完全指南如果您需要一个齿轮图标，但不知道从哪里开始，本文将为您提供完整的解决方案。步骤1：输入所需要的内容首先，您需要输入所需要的内容，例如“查找齿轮”。步骤2：选择备选然后，在给出的备选中，选择您所需要的齿轮图标。步骤3：下载图标接下来，在图标上点击下载按钮，并可以调整图标

分类标签齿轮图标选择

11-10 02:29

Microsoft365中全面植入GPT-4，AI创作时代，围绕PPT的产业生态圈还会有未来吗？

PPT两次智能化功能升级长期以来，非设计专业人士在PPT制作过程中遇到很多困难。为了解决这个问题，微软尝试过两次做智能化设计的改变。第一次是在Office2007中引入SmartArt功能，第二次是在2015年发布的名为“设计器”的新功能。虽然这些功能对于新手来说仍有一定难度，但它们的出现为非设计专

分类标签 Microsoft365GPT-4AI创作PPT产业生态圈智能化

10-23 01:10

ChatGPT Midjourney 文心一言文心一格 bing新必应 Stable diffusion 稿定设计墨刀AI mastergo Adobe Firefly runway