文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    2021 年 Web 开发常用的五个图标库（建议收藏）

    提供 CSS 类，Unicode 和 SVG 格式的图标。 可以使用纯 CSS 直接更改图标的基本属性（颜色、阴影、背景等）。 可以轻松升级到最新版本。...Font Awesome 全局 CDN 和缓存可用于更快地加载图标。 专业版价格为每年 99 美元，包括自定义设置，人工技术支持，专业版下载，标准专业证书和其他功能。 4....Streamline Icons img Streamline Icons 是另一个优秀的图标库，你可以在项目开发中使用。...但是，除非升级软件包，否则无法更改图标的颜色。 Streamline Icons 的主要特点 提供 Sketch、AI、EPS、PDF、PNG 和 SVG 格式。...总结 以上图标库只是互联网上许多可用库的子集，由于它们的实用性和丰富的功能集而流行。然而，一个优秀的图标库只是开发者选择图标库的一个方面。

    1.4K30

    2021 年 Web 开发常用的五个图标库（建议收藏）

    提供 CSS 类，Unicode 和 SVG 格式的图标。 可以使用纯 CSS 直接更改图标的基本属性（颜色、阴影、背景等）。 可以轻松升级到最新版本。...Font Awesome 全局 CDN 和缓存可用于更快地加载图标。 专业版价格为每年 99 美元，包括自定义设置，人工技术支持，专业版下载，标准专业证书和其他功能。 4. Fontisto ?...img Streamline Icons 是另一个优秀的图标库，你可以在项目开发中使用。Streamline 大约有 30000 个漂亮的可适应性图标，包括 50 多个类别。...但是，除非升级软件包，否则无法更改图标的颜色。 ? Streamline Icons 的主要特点 提供 Sketch、AI、EPS、PDF、PNG 和 SVG 格式。...总结 以上图标库只是互联网上许多可用库的子集，由于它们的实用性和丰富的功能集而流行。然而，一个优秀的图标库只是开发者选择图标库的一个方面。

    1.4K10

    这15个HTMLCSS错误我不信你没犯过(网站规范)

    1.使用占位符属性而不是标签元素 我经常看到的流行错误是使用占位符属性而不是标签元素。但屏幕阅读器的用户在这种情况下无法填充字段，因为屏幕读取器无法从占位符属性读取文本。...例如，他们使用 img 元素标记社交图标。 但是社交图标是一个装饰图标，它可以帮助用户更快地理解元素的含义，而无需阅读文本。如果我们删除图标，我们不会失去元素的含义，因此我们可以使用背景图像属性。...; } 7.您的SVG图标会破坏您的界面 当您在 HTML 文档中使用 SVG 图标时，请注意设置宽度和高度属性。...如果你不这样做，你依靠你设置的宽度和高度属性在CSS你的界面将被打破。 您的CSS可能未加载，此时，图标将尝试填充所有可用空间。所以错误发生了。只需设置宽度和高度属性，即可轻松入睡。... 11.替代属性具有不正确的值 如果开发人员正确使用，alt 属性可能非常有用。不幸的是，他们中的许多人并没有试图描述图像，使视觉障碍的人能够理解图片的内容。

    3.3K31

    图标字体应用实践

    本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。...只要将图标做好，放到相应的文件夹里面，写好配置文件运行，就能够生成相应的图片和css，无需自己手动去调整位置等css属性。...雪碧图不方便变化 雪碧图是一张静态的图片，当他生成的那天就注定了他要以什么样的方式展示，因此我不能动态地改变他的颜色，无法让他变大(可能会失真)，无法像文字一样加一个阴影效果等等。...解决文案是加一个font-smoothing的属性： 解决边缘加粗问题 CSS .icon{   -webkit-font-smoothing:antialiased;   -moz-osx-font-smoothing...src属性，这种方法的缺点是没办法用CSS控制样式。

    2.3K20

    30道CSS 面试知识点总结

    它具有简单的语法，并使用大量的英文关键字来指定各种样式属性的名称。 既然我们已经讨论了CSS的基础知识，让我们来观察一下基于CSS的重要面试问题。 问题1：什么是 CSS？...问题 17：我们如何在网页上添加图标？ 我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。...我们必须将给定图标类的名称添加到任何内联HTML元素中。 （或）。 图标库中的图标是可缩放的矢量，可以使用CSS进行自定义。 问题 18：哪个属性指定边框的宽度？...嵌入式样式表的缺点： 无法控制多个文档。 问题 23：列出使用的各种媒体类型。 不同的介质不区分大小写，因此它们具有不同的属性。...问题 24：font 的属性有哪些？

    1.4K20

    26 个 CSS 面试的高频考点助力金三银四

    它具有简单的语法，并使用大量的英文关键字来指定各种样式属性的名称。 既然我们已经讨论了CSS的基础知识，让我们来观察一下基于CSS的重要面试问题。 image.png 问题1：什么是 CSS？...问题 17：我们如何在网页上添加图标？ 我们可以使用诸如font-awesome或者阿里的 iconfont 之类的图标库将图标添加到HTML网页。...我们必须将给定图标类的名称添加到任何内联HTML元素中。 （或）。 图标库中的图标是可缩放的矢量，可以使用CSS进行自定义。 问题 18：哪个属性指定边框的宽度？...嵌入式样式表的缺点： 无法控制多个文档。 问题 23：列出使用的各种媒体类型。 不同的介质不区分大小写，因此它们具有不同的属性。...问题 24：font 的属性有哪些？

    2K20

    CSS 样式补充之 font & background

    1.字体 font-face可以将服务器中的字体直接提供给用户去使用 问题： 1.加载速度 2.版权 3.字体格式 @font-face { 命名一个自己的字体 /* 指定字体的名字 /...- 所以在使用图标时，我们还可以将图标直接设置为字体， 然后通过font-face的形式来对字体进行引入 - 这样我们就可以通过使用字体的形式来使用图标...font 可以设置字体相关的所有属性 语法： font: 字体大小/行高 字体族 (字体大小 字体族 必须写，并写字体族在最后) 行高 可以省略不写 如果不写使用默认值 的所有属性 语法： font: 字体大小/行高 字体族...浏览器加载外部资源时是按需加载的，用则加载，不用则不加载 像我们上边的练习link会首先加载，而hover和active会在指定状态触发时才会加载

    2K51

    前端优化汇总，到底该不该做？

    ，信息是明文传输，HTTPS则是具有安全性的SSL(Certificate Authority，申请证书)加密传输协议,HTTPS加密传输、身份认证的网络协议,内容传输经过完整性校验、内容经过对称加密，...每个连接生成一个唯一的加密密钥、第三方无法伪造服务端(客户端)身份等众多优势，同时也有劣势因为做的事情多了中间对接的次数同样需要时间，这也是HTTPS更慢的根本原因。...；该功能webpack有个插件，配置后编译能自动插入到页面上; preload：没错，它就是一个可以预加载资源的属性，详细说明请看官方API,一般情况下我们可能会对接下来的业务需要的audio、img、...font、script等资源进行预先加载（甚至是下一个路由页面哦），这样能达到0秒打开页面的效果！...以上就是今天的分享，新手上路中，我会努力让自己变得更优秀、写出更好的文章，文章中有不对之处，烦请各位大神斧正。如果你觉得这篇文章对你有所帮助，那就请关注下方的 公众号吧。

    77360

    【译】Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例

    1.1 设置宽度和高度属性 在页面加载时，它们会在页面图片加载时发生一些布局变化。...原因是 被视为替换元素，因此我们无法控制其加载的内容。 1.3 可访问性问题 HTML图片应该通过将 alt 属性设置为有意义的描述来访问，这对屏幕阅读器用户来说是非常有帮助的。...，我喜欢它从一个小图标变成一个完整的Logo。...4.5 带图标的输入框 ? 通常会看到带有图标的输入框，如何添加？当输入被聚焦时会发生什么？让我们来探索一下。...对于包含说明性步骤的菜谱，重要的是将它们打印出来，否则用户将无法从打印web页面中获得任何好处。

    5.6K20

    微前端框架qiankun项目实战（二）--踩坑与部署篇

    微应用的图标 ? 可以看到两个应用的图标命名是一致的，不过主应用是空心的，微应用是实心的 下载好的图标库是这样的 ?...-和micro-app-iconfont 然后重新下载两个图标库并重新引入，目前两个iconfont.css的关键代码如下 // 主应用的iconfont.css @font-face { font-family...： const apps = [ /** * name: 微应用名称 - 具有唯一性 * entry: 微应用入口 - 通过该地址加载微应用 * container: 微应用挂载节点...[ /** * name: 微应用名称 - 具有唯一性 * entry: 微应用入口 - 通过该地址加载微应用 * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上...没错，经典的跨域问题，因为部署的是本地，有两个解决办法 第一个（不推荐）是作弊的方法 新建一个chrome浏览器的快捷方式，然后右键，属性 ?

    1.9K40

    Fonts最佳实践

    改变样式表的内容或交付方式会对字体的到达时间产生重大影响。同样地，删除未使用的CSS和拆分样式表可以减少页面加载的字体数量。 最佳做法 字体是典型的重要资源，因为没有它们，用户可能就无法查看页面内容。...属性的单独的预连接资源提示。...特别要注意的是，为中日韩语言优化字体可能特别具有挑战性。 Unicode范围和字体子集：@font-face经常与 unicode-range 描述符一起使用。...这种行为可以通过使用font-display属性进行配置。这种选择会产生重大影响：font-display有可能影响LCP、FCP和布局的稳定性。...对传统网页字体行之有效的font-display策略对图标字体的效果并不理想。图标字体的后备字体通常看起来与图标字体明显不同，其字符可能传达出完全不同的含义。因此，图标字体更有可能导致显著的布局变化。

    3.1K72

    NvueWeex

    不支持 display 属性 不能使用 display:none; 来控制元素的显隐性 v-show 条件渲染是不生效的，使用 v-if 代替 7. z-index 层级 不支持 z-index 进行层级关系的设定...，但是靠后的元素层级更高，因此，可以将层级高的元素放在靠后的位置 8. background 背景 /** background不支持简写，简写在浏览器上颜色能够正常渲染，但是在手机端，颜色无法正常渲染...阿里矢量图标库 /** 以阿里矢量图标库iconfont为例引入字体图标 **/ /** 只需要在首页引入一次即可全部页面使用 **/ /* App.vue */ .iconfont{ font-family...resize属性决定图片缩放，允许值cover / contain / stretch，默认stretch 2. webview 是weex支持的webview组件，加载完成后显示HTML...是uniapp支持的webview组件，webview-styles属性不支持 上述组件都必须指定width, height 和 src，否则无法显示 可以使用 flex: 1

    1.7K20

    CSS 样式重置

    标签具有默认样式，由浏览器所决定的，为了达到在各个主流内核的浏览器页面样式显示一致，会重置具有默认样式的标签，得到样式表，就是 reset.css / base.css 以下的默认样式是在 Chrome...取得的 默认样式 标题 ~ 默认样式：加粗 font-weight:bold;，字号 2em/1.5em/1.17em/1em/0.83em/0.67em，外边距 margin-top.../ margin-bottom 超链接 ，必定会有 href 属性 默认样式：颜色：color，下划线：text-decoration:underline;，光标：cuisor:auto/pointer...优点：可以跟字体一样，设置大小/颜色，放大不会失真、模糊 缺点：只能出现一种颜色，额外加载字体库 想要引用 bootstrap 的字体图标，就必须将 dist 文件夹下的 fonts 文件夹拷贝到你的项目里...，然后按照 Glyphicons 字体图标 对应的字体图标名称引用即可 <!

    4.2K40

    快捷方便的 Font Icons 生成工具： Iconfont

    字体图标和 @font-face 先来简单的介绍一下字体图标。字体图标是近两年才流行起来的技术，主要是因为 CSS3 增加了一个非常实用的属性 @font-face。...传统的网页中的字体设置，使用 font-family 属性来定义，而且受限于浏览者电脑上所安装的字体，如果浏览者电脑上没有安装对应字体，那么网页渲染起来就会使用其他字体来代替。...而新增的 @font-face 改变了这一现状，使用该属性，可以指定服务器上的一个字体，当浏览者访问的时候，会优先下载服务器上的字体，然后再使用该字体渲染网页。...如果某个文字的字体，并不设计成那个文字的变形，而设计成截然不同的图标，那么当网页中出现这个文字，就会渲染出一个图标。 配合上 @font-face 就有了 Font Icon 这项技巧。...毕竟国内这块技术发展比较晚，优秀的设计师也比较少，仅靠阿里前端团队能做成这样已经很不容易了。

    1.3K10

    PPT缺少图标素材? 试试Font Awasome吧!

    PPT的整体质量, 和选取素材的质量, 有很大关系~ 有些小伙伴, 即使花了很多精力, 也找不到好的素材, 只好在元素的装饰效果上做文章,结果就是越用心, 越丑陋 优秀的图标素材, 往往能让整张PPT...简洁优雅, 下面教给大家如何快速用上优秀的图标 ?...推荐一套名为Font Awesome 5 Free的字体, 这套特殊的字体, 可以将英文单词(关键词)转换为图标, 转换而来的图标, 本质是一个字符(无限放大也会非常清晰), 你可以为它设置字号, 颜色..., 如果你用的足够熟练, 可以直接通过输入关键词, 快速获取对应图标(提供1500个图标, 满足你大部分设计需求!)...小结 制作一份好的PPT, 往往是一个系统工程, 优秀的图标是很好的工程材料, 值得我们花一些时间去研究 如果你无法下载资源包, 可以关注微信公众号jikeweikan, 回复Font Awesome,

    87120
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券