首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

不使用库的字形图标

是指在前端开发中,不依赖于任何第三方图标库,而是通过自定义或手动绘制的方式来创建和使用字形图标。

概念:

字形图标是一种使用字体文件中的特定字符来表示图标的技术。每个图标都被分配一个唯一的Unicode编码,通过在HTML或CSS中使用该编码,可以将其呈现为图标。

分类:

字形图标可以根据其来源和使用方式进行分类。常见的分类包括:

  1. 自定义字形图标:开发人员可以使用矢量图形软件(如Adobe Illustrator)手动绘制图标,并将其导出为字体文件。这种方式可以完全按照设计需求进行定制,但需要一定的设计和开发技能。
  2. 手动绘制字形图标:开发人员可以使用CSS的伪元素(::before和::after)来手动绘制简单的图标。这种方式适用于一些简单的几何形状图标,但对于复杂的图标可能不太适用。

优势:

不使用库的字形图标具有以下优势:

  1. 自定义性:可以根据项目需求自定义设计和绘制字形图标,使其与项目风格和品牌一致。
  2. 减少依赖:不依赖于第三方图标库,减少了项目的依赖和维护成本。
  3. 网页性能:字形图标通常比使用图片的图标具有更小的文件大小,可以提高网页加载速度和性能。

应用场景:

不使用库的字形图标适用于各种前端开发项目,特别是需要高度定制化和独特设计的项目。例如:

  1. 品牌网站:可以根据品牌形象和设计需求,定制独特的字形图标,使网站更具个性和专属感。
  2. 移动应用:在移动应用中使用字形图标可以减少应用的安装包大小,提高应用的加载速度和性能。
  3. 网页应用:字形图标可以用于各种按钮、菜单、标签等交互元素,提升用户体验和界面美观度。

推荐的腾讯云相关产品:

腾讯云提供了一系列与云计算相关的产品和服务,以下是一些推荐的产品:

  1. 云服务器(CVM):提供弹性、安全、稳定的云服务器实例,可满足各种计算需求。
  2. 云数据库MySQL版(CDB):提供高性能、可扩展的MySQL数据库服务,支持自动备份、容灾等功能。
  3. 云存储(COS):提供安全、可靠的对象存储服务,适用于存储和管理各种类型的数据。
  4. 人工智能平台(AI):提供丰富的人工智能服务,包括语音识别、图像识别、自然语言处理等。
  5. 物联网(IoT):提供全面的物联网解决方案,包括设备接入、数据管理、应用开发等。
  6. 云原生应用平台(TKE):提供容器化的应用部署和管理平台,支持快速构建和扩展云原生应用。

产品介绍链接地址:

  1. 云服务器(CVM):https://cloud.tencent.com/product/cvm
  2. 云数据库MySQL版(CDB):https://cloud.tencent.com/product/cdb_mysql
  3. 云存储(COS):https://cloud.tencent.com/product/cos
  4. 人工智能平台(AI):https://cloud.tencent.com/product/ai
  5. 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  6. 云原生应用平台(TKE):https://cloud.tencent.com/product/tke

请注意,以上推荐的产品和链接仅为示例,具体选择和使用需根据实际需求和情况进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ICONFONT字体图标使用

Iconfont-国内功能很强大且图标内容很丰富矢量图标,提供矢量图标下载、在线存储、格式转换等功能。 本文我们就来一起学习一下iconfont字体图标使用吧。...效果图: 首先,搜索一下iconfont: 选择第一个链接,点进去: 登录进去,我这边用是自己github账号。...登录成功后,选择我项目,去新建一个项目: 项目新建好了以后,内部还没有任何图标,接下来,我们可以类似淘宝购物一样去获取想要图标。 看到你喜欢图标,选择添加入库!...也可以直接在搜索栏进行图标的搜索!...挑选完毕之后,我们还需要把库里图标添加至项目: 复制一下代码,接着在对应页面中引入: <link type="text/css" rel="styleSheet" href="http://at.alicdn.com

2.6K80

Vue项目使用iconfont图标

最近一直在更新Vue项目中配置及使用一些内置方法,今天讲一讲Vue项目中使用iconfont图标,不管是管理平台还是官网展示之类显示页面,都会用到一些小图标,如果我们用img标签,那我们资源会非常大...,而且后期如果我们针对图标调整大小,改色等之类操作,就需要用到Photoshop等专业类工具,上手困难不说,而且比较麻烦,下面就说下Vue使用iconfont图标。...开始找我们需要用到图标,添加到我们新建项目中 ? 生成可用文件,可以下载,然后在index.html里面引用,这里我们讲另一种方案,动态生成引用, ? 下面这个地址,是我们待会用到 ?...到这,iconfont图标这块操作完了,接下来就是在我们项目中使用这个图标了。...iconfontVersion.forEach(ele => { loadStyle(iconfontUrlCss.replace('$key', ele)) }) 这样,项目中就动态引入iconfont图标

2K1513
  • 字体图标使用方法

    一些字体图标网站 https://icomoon.io/app/#/select http://www.iconfont.cn/ http://www.bootcss.com/ http://www.bootcss.com.../p/cikonss/  以第一个链接网站里字体为例 选择自己需要图标,点击右下角下载下来 ?...设置图标样式,给个统一类名,全局调用,比如我这里设置所有的i标签给一个icon类名 类样式可以根据自己项目写一些公共 我这里直接复制腾讯课堂代码过来都可以用,所以说代码这里大同小异,具体不同可以利用图标的名字...对应图标类名,引到html图标标签class处即可 ? 例如:  我这里要用第一个message图标,我在html中这样引用: ? 另外我在css中设置其单独样式: ? 好了,大功告成! ?...------------------------------------------------------------------------------- 声明:   请尊重博客园原创精神,转载或使用图片请注明

    3.5K70

    阿里巴巴矢量图标在线链接使用图标

    1、去官网 iconfont-阿里巴巴矢量图标 如果没有注册先注册一下 2、搜索你需要图标加入项目 搜索图标 找到心仪图标后,添加入库,添加成功会出现虚线框,而右边小车上会出现添加图标的数量 点击小车图标...,进入 添加到项目里面,如果没有项目,就创建一个 添加完毕后,就会跳转到另一个页面 点击进入改变图标默认样式大小、颜色-方法1 【推荐】 3、使用图标 样式文件css引入(如果图标样式改变,还需要更新...css文件,会有提示出来图标使用【class必须写上 iconfont ,后面的图标名字可以在图标仓库里面复制】 改变图标默认样式大小、颜色-方法2 【推荐】 .iconfont {

    17310

    字体图标iconfont使用

    1.将从阿里矢量图标图标并下载到本地 2.使用图标(三种使用方式) 1.使用 FontClass(最简单方式,支持字体样式定义但不支持多色字体) fontClass 支持字体样式定义,但不支持多色字体...} 2.使用 Unicoded(兼容性最好,支持字体样式定义但不支持多色字体) 支持字体样式定义,但不支持多色字体,兼容性最好,支持 IE6+,及所有现代浏览器。...--生效--> } 注意:iconfont 图标 symbol 引用方式,有的图标不能通过设置 color 样式来修改颜色解决办法 原因: 当从阿里图库中图标被添加至项目,如果编辑过项目图标的颜色或者图标本身是有颜色...,那么在通过 symbol 获取图标时会在 svg path 中增加 fill 属性,导致无法更改颜色,如果需要动态修改颜色,需要从新添加该图标(本身图标无色),获取在 symbol js 文件中程序删除...:before/:after 里 iconfont 使用方法 :before/:after 是伪元素,fontawesome 是在伪元素 content 加入不同 Unicode 来渲染不同图标

    4.1K20

    怎样更改组件图标

    想必很多前端现在都是用别人组件,ant-design、element-ui或者vant等,那么当组件上icon和我们美丽动人UI小姐姐画出UI稿不一样时候,你们会怎么做呢?...组件api替换大法 1、组件本身提供api给你更换icon,换之则可 2、但每次使用都要替换也是挺麻烦,可以尝试先封装一下,使用高阶组件 可行性高,操作容易、略麻烦 源码copy大法 1、不使用传统...npm install包安装方法 2、将组件源码copy下来单独一个文件 3、修改源码组件对应图标 4、或者自己建立一个私有的npm将整个组件推上去 1、一次操作到位 2、但是组件版本滞后...EyeOutline' export { default as DeleteOutline } from '@ant-design/icons/lib/outline/DeleteOutline' 就是将你需要更改图标的地址改为你本地...而且这里可以只引入一些你需要图标,会减少一些icon打包大小 本地图标 "use strict" Object.defineProperty(exports, "__esModule", {

    85310

    在网站或桌面应用使用Font Awesome图标

    Font Awesome介绍 Font Awesome为您提供可缩放矢量图标,您可以使用CSS所提供所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持效果。...引用CSS文件之后,接下来就可以使用图标了。...在WPF中使用FontAwesome之类字体图标 在WPF程序中,一般接触到矢量图标资源有XAML、SVG、字体这三种格式。...而对于字体,虽然WPF是直接支持,但由于字体图标其特殊性,要将其显示为图标还是需要费点劲。本文这里就以Font-Awesome为例,介绍一下如何在WPF中使用字体图标。...但这里有一个小知识点就是:一般来说,fortawesome之类图标字体中图标对应文字都是不可以通过输入法直接输入,只能直接输入Unicode编码,WPF在XAML中使用Unicode编码输入方式和

    2.1K20

    建议使用PbootCMS默认数据Sqlite

    给PB新手用户一点小建议,PbootCMS网站内容管理系统默认数据是Sqlite。 这个数据优点是轻量,跟access一样。无脑用就可以了。非常适合新手,因为几乎没有学习成本。...如果你是搞采集,或者会批量发文章,奔着数以万计数据量来的话, 我建议你一开始就是用mysql数据。 虽然会比sqlite多一点点学习成本,但是仍然建议你学习一下简单导入、导出数据操作。...反之如果你使用Sqlite数据的话,如果遇到服务器突然宕机。...你可能会遇到:The database disk image is malformed; 当数据量大了,数据更新记录时候,你可能会遇到:The database disk image is malformed...试问:你会解决这样Sqlite错误么?

    2.2K20

    数据推荐使用外键9个理由

    来源:www.jdon.com/49188 我经验告诉我,很多数据(大多数我曾经使用包含外键时并不总是一件坏事。在这篇文章中,我想把重点放在为什么原因上。 为什么这是一个问题?...这仅仅是我在各种渠道(主要是互联网论坛)都能找到许多开发人员、架构师为什么不使用它们理由。我个人(和许多其他经验丰富数据专家)建议在任何可能地方使用它们(不会导致更多问题)。...4.更高层次框架 一些应用程序使用编程框架,在物理数据之上创建另一个逻辑层。开发人员不使用插入或更新语句来修改数据,而使用API或者框架在后台执行所有操作。...这些工具负责参照完整性,并与RDBMS一起创建更高级别的数据引擎。这些框架可以自己创建数据表,而总是创建外键。使用这些工具开发人员很少会干扰自动生成模式,并且不需要外键。...这需要一些努力,但是却没有带来直接好处。一些架构师和数据管理员只是忽略了这一部分。 9.保持模型秘密 也许这是一个很遥远问题,但也许有时候是因为人们希望别人知道太多太容易。

    2.1K10

    数据推荐使用外键 9 个理由

    让我们来看看数据可以没有外键原因。首先一个简短免责声明(因为文章引发了一些关于LinkedIn群体争议): 下面的理由绝不鼓励不要在数据使用外键约束。...这仅仅是我在各种渠道(主要是互联网论坛)都能找到许多开发人员、架构师为什么不使用它们理由。我个人(和许多其他经验丰富数据专家)建议在任何可能地方使用它们(不会导致更多问题)。...4.更高层次框架 一些应用程序使用编程框架,在物理数据之上创建另一个逻辑层。开发人员不使用插入或更新语句来修改数据,而使用API或者框架在后台执行所有操作。...这些工具负责参照完整性,并与RDBMS一起创建更高级别的数据引擎。这些框架可以自己创建数据表,而总是创建外键。使用这些工具开发人员很少会干扰自动生成模式,并且不需要外键。...这需要一些努力,但是却没有带来直接好处。一些架构师和数据管理员只是忽略了这一部分。 9.保持模型秘密 也许这是一个很遥远问题,但也许有时候是因为人们希望别人知道太多太容易。

    1.7K30

    推荐 5 个优秀 Javascript 图标 🚀

    特性⚡ 开源(免费使用) 可通过 NPM 包安装 可通过 CDN 引用 图标制作精美 2. Ionicons 针对web、iOS、Andriod和桌面应用是一个很优质图标。...特性⚡ 开源(免费使用) 可通过 NPM 包安装 可通过 CDN 引用 图标制作精美 有不同选择:轮廓,填充和锐化 3. Boxicons 简单开源图标,适合设计师和相关开发者。...CSS Icons image.png 此开源图标可支持仅纯CSS代码编写,也可支持其它不同形式,如:SVG, Figma等。如果你在站点性能上追求极致,推荐你使用这个。...☄️ 特性⚡ 开源(免费使用) 可通过 NPM 包安装 可通过 CDN 引用 图标制作精美 图标可以仅通过 CSS 完成,使得你项目性能更高 当然还有很多图标可以推荐给大家,但是,上面的 5...读者可以选择适合自己图片使用。 后话 原文:Top 5 Best Javascript Icons Libraries

    1.4K20

    为什么推荐数据使用外键?

    经验告诉我,很多数据(大多数我曾经使用包含外键时并不总是一件坏事。在这篇文章中,我想把重点放在为什么原因上。 为什么这是一个问题?...这仅仅是我在各种渠道(主要是互联网论坛)都能找到许多开发人员、架构师为什么不使用它们理由。 我个人(和许多其他经验丰富数据专家)建议在任何可能地方使用它们(不会导致更多问题)。...4.更高层次框架 一些应用程序使用编程框架,在物理数据之上创建另一个逻辑层。开发人员不使用插入或更新语句来修改数据,而使用API或者框架在后台执行所有操作。...这些工具负责参照完整性,并与RDBMS一起创建更高级别的数据引擎。这些框架可以自己创建数据表,而总是创建外键。使用这些工具开发人员很少会干扰自动生成模式,并且不需要外键。...这需要一些努力,但是却没有带来直接好处。一些架构师和数据管理员只是忽略了这一部分。 9.保持模型秘密 也许这是一个很遥远问题,但也许有时候是因为人们希望别人知道太多太容易。

    1.8K20

    《css大法》之使用伪元素实现超实用图标(附源码

    正文 先看看我们用纯css实现图标: ? ? ? 当然,如果我们知道了做出如上图标的css原理,那么我们就可以实现更加丰富复杂图形,甚至可以打造自己图标。...原理 我们实现如上css图标是基于伪元素,可以利用伪元素::before和::after和content属性来为元素添加额外视觉效果,我们在上文中也介绍了伪元素概念和类型,接下来让我们来实现它吧~...实现搜索图标 ?...地点图标由一个圆和一个三角形组成,如果要做精致一点,我们可以再用一个伪元素来做一个定点: // less .locate-icon { position: relative; display...,原理都类似,笔者之前曾利用这个方案做过一套100个图标,成功应用于各个项目中,由于体积小不会造成额外请求,所以更加实用,但更复杂图形就为了方便还是建议用字体图标或者svg,base64等。

    1.2K40

    基于Vue2.xUI组件引入Iconfont图标(引入第三方图标篇)

    具体可查看笔者qiucode-UI文档:qiucode-UI文档地址 本篇笔者将讲解在Vue项目中如何引入第三方图标,如:Inconfont https://www.iconfont.cn...fontawesome https://fontawesome.io/ 登录到Iconfont官网,然后选择你想要图标,添加到购物车里。...最后添加到你项目里。 你可以在你项目直接引入外网css,可在线生成链接按钮进行生成链接,在你html中添加这个远程css链接就可以了!是不是很方便啊!...但如果考虑到有的用户网速并不是那么好,这样就对用户体验就不好(这是乔布斯提出,对用户要有友好体验) 那么就下载它,文件结构如下图: 将iconfont.eot iconfont.svg.../packages/qiu-style/iconfont.css' 具体可查看笔者qiucode-UI文档:https://zhenqicai.github.io/qiucodeUI-docs/#

    1.7K10

    怎么使用阿里巴巴矢量图标图文教程

    ,设置了远程数据,才算终止,当然我并不能确定是我弄好还是不再攻击了,这都不重要,重要是,要时时刻刻做好备份,确保数据不会丢失,嗐,无奈啊~~~ 好了,废话了,今天教教大家怎么设置导航图标使用阿里巴巴代码...,话说奥森图标貌似没在更新(或许是我没关注),所以在最新主题模板明信片上将奥森图标统一换成了阿里巴巴图标,为什么?...="stylesheet"> 将“阿里巴巴图标代码”换成刚刚复制好代码,如上图蓝色区域所示,右侧开启接口,点击底部保存,回到阿里巴巴图标,鼠标放在刚刚设置图标上,能看见“复制代码”字样,点击复制代码...最后最后,你会发现,图标安装之后格局有一丢丢变化,这就是我之前说图标大小统一,因为阿里巴巴默认图标16号字体,主题模板默认是14号字体,打开主题设置,全局设置,添加如图代码即可解决。...代码如下: i.icon{font-size:inherit;} 切记本站所有主题代码都是教程前缀,如果您想使用在其他主题模板,请先确认前缀和family名称,好了,教程写完了,喝杯咖啡,有不了解留言吧

    2K60
    领券