文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android应用图标微技巧，8.0系统中应用图标的适配

终于在Android 8.0系统中，Google下定决心要好好整治一下Android应用图标的规范性了，今天我们就来学习一下。...唯一需要我们留意的就是mipmap-anydpi-v26这个目录，这个目录表示什么意思呢？就是Android 8.0或以上系统的手机，都会使用这个目录下的ic_launcher来作为图标。...SVG格式的图片都是使用AI、PS等图像编辑软件制作之后导出的，基本没有人可以手工编写SVG图片。...类似地，这里也是使用SVG格式绘制出了一个Android机器人的Logo，并且这个机器人还是带投影效果的。当然了，前景层我们也是可以使用PNG、JPG等格式的图片的，待会儿会进行演示。...系统中通知栏的适配 。

1.7K20

浅尝iconfont

使用大图片会造成两个问题：缩放效率和大图流量浪费加载慢 使用svg图片可以很好的解决图片大小的问题，但是兼容性是这个解决方案的致命问题，svg不兼容IE6~8，svg不兼容Android2.3 css，...，现在有很多线上制作iconfont的站点，只要上传svg的图标设计稿，就能线上生成iconfont字体文件，而且连使用代码都直接生成 iconfont没有兼容性问题，IE6，Android2.3都能够兼容...然后我们可以自定义字码： ? 最后我们就可以下载字体文件了： ? 下载完，解压出来，我们可以看到有demo，有字体文件，也有使用代码： ? 可以看到使用代码里面已经把各种兼容性考虑到了： ?...使用代码也给到，注意使用类名也是可以在站点中自定义的： ? 另外注意的是，字体文件也是可以内链的，在fontello-embedded.css文件里面： ?...and performance，不过许多问题在移动端是不存在的 3.3 结语 总的来说，iconfont是可以应用的，特别是在移动端，如果不兼容Android2.3，使用svg图片也是可以接受的，实际上制作

2.3K70
您找到你想要的搜索结果了吗？
是的
没有找到

浅尝iconfont

使用大图片会造成两个问题：缩放效率和大图流量浪费加载慢 使用svg图片可以很好的解决图片大小的问题，但是兼容性是这个解决方案的致命问题，svg不兼容IE6~8，svg不兼容Android2.3 css，...，现在有很多线上制作iconfont的站点，只要上传svg的图标设计稿，就能线上生成iconfont字体文件，而且连使用代码都直接生成 iconfont没有兼容性问题，IE6，Android2.3都能够兼容...然后我们可以自定义字码： ? 最后我们就可以下载字体文件了： ? 下载完，解压出来，我们可以看到有demo，有字体文件，也有使用代码： ? 可以看到使用代码里面已经把各种兼容性考虑到了： ?...使用代码也给到，注意使用类名也是可以在站点中自定义的： ? 另外注意的是，字体文件也是可以内链的，在fontello-embedded.css文件里面： ?...and performance，不过许多问题在移动端是不存在的 3.3 结语 总的来说，iconfont是可以应用的，特别是在移动端，如果不兼容Android2.3，使用svg图片也是可以接受的，实际上制作

1.5K20

Iconfont在教育平台的实践

随着平台规模的不断扩大，我们发现/img/目录的小图标越来越多，已经达到了700+多个，这么多图标真的都是必须的吗？ ?...使用效果 与图片效果一致 ? 遇到的一些问题 svg图标绘制 虽然目前线上有很多这种图标，但是为了我们平台的图标统一性和可沉淀，我们选择了自己绘制图标。...在选择绘制图标大小上有了几次尝试，因为图标大多数是12px/16px/24px/32px/48px，最后我们经过多次测试确认绘制的svg大小为480px，左右留白30px这个标准 字体跨域问题 这个是遇到的最简单的一个问题...1;，在垂直对齐的时候先使用vertical-align，如果不行，我们就用绝对定位。...遗留问题 IE8中，如果字体文件加载失败，则整个页面空白，虽然其他资源正常加载，逻辑正常运行。 iOS、Andriod中，字体文件或阻碍其他资源下载。

1.2K20

Iconfont在教育平台的实践

随着平台规模的不断扩大，我们发现/img/目录的小图标越来越多，已经达到了700+多个，这么多图标真的都是必须的吗？ ?...使用效果 与图片效果一致 ? 遇到的一些问题 svg图标绘制 虽然目前线上有很多这种图标，但是为了我们平台的图标统一性和可沉淀，我们选择了自己绘制图标。...在选择绘制图标大小上有了几次尝试，因为图标大多数是12px/16px/24px/32px/48px，最后我们经过多次测试确认绘制的svg大小为480px，左右留白30px这个标准 字体跨域问题 这个是遇到的最简单的一个问题...1;，在垂直对齐的时候先使用vertical-align，如果不行，我们就用绝对定位。...遗留问题 IE8中，如果字体文件加载失败，则整个页面空白，虽然其他资源正常加载，逻辑正常运行。 iOS、Andriod中，字体文件或阻碍其他资源下载。

1.5K70

前端不止：请告诉我，你要什么样的图标

，以方便制作雪碧图，这个过程可以由开发人员自己完成，也可以由设计师来做（设计师可以根据源文件中心导出一张包含所有图标的PNG文件制作）。...设计师可以轻松的在设计绘图软件（AI，PS）的帮助下导出SVG格式的图标/图片。...博客和视频中谈到了多个点导出SVG需要注意的地方，由于篇幅限制，这里简单描述三个tips： 选择适合绘画的画板 你有在网页上嵌入过SVG吗，给它指定一个高度和宽度，然后发现它其实比你指定的尺寸要小？...如果SVG中包含大量的文字，这个选项output fewer tspan elements可以在很大程度上降低svg的大小。...（UI Developer - 参考自Stack Overflow答案） ---- 结尾 在本篇文章中，我们谈了图标的三种使用方式：图片、SVG、IconFont，而它们也只是图标这个话题的冰山一角

1.6K70

从 Web 图标演进历史看最佳实践

在 Web 产品中引入图标，大致经历过如下几个阶段：使用独立的图片来引入图标、使用 CSS sprites 技术、使用字体图标（font icons）、使用 SVG（inline SVG/SVG sprites...这个 API 返回图标库中图标的图形数据（SVG 源文件）和元数据，在整个流程中主要有两个消费者：给设计团队使用的 Sketch 插件，以及前端的编译/发布服务。...我们允许图标库发布时通过 webhook 配置需要通知的编译服务，所以有必要的话，不同的使用方也可以选择自己自定义整套编译发布的流程。...5.2 Sketch 插件 ---- 我们给设计团队提供了联通图标管理平台的 Sketch 插件，设计师可以在插件中快速搜索需要的图标进行使用。...根据在 webhook 回调路径中的配置，我们可以指定需要发布的包的名称，描述等信息。

1.6K10

使用纯CSS给网站文章中的外链添加小图标

最近突然有一个想法，文章中的链接不够明显，可不可以在不修改类名的前提下，给所有 a 标签添加一个图标呢？ 答案是肯定的，只有想不到，没有做不到。...我们可以分析一下， bootstrap 的组件图标库。 它们在图标标签上加了一个伪类，这个伪类就代表了相对应的图标。 那么我可以直接拿这个标识来用吗？...我们先看一下字体的 CSS 源码，这里以阿里图标库的 iconfont 生成的 CSS 文件为例： @font-face {font-family: "iconfont";   src: url('iconfont.eot...也可以直接生成 Unicode 代码，放在你 CSS 样式文件的开头，就可以愉快的给某个元素批量设置自定义图标了。...未经允许不得转载：w3h5-Web前端开发资源网 » 使用纯CSS给网站文章中的外链添加小图标

36150

适合前端开发 和UI 设计的20多个最佳 ICON 库

如果希望使用web字体而不是静态文件来显示图标，那么FlatIcon 将负责格式转换并生成一个可以使用的 web 字体。我们还可以自定义下载的图标。...免费的图标包灵感来自Material设计，并以三种不同的视觉风格呈现-圆形，轮廓和两色。 该套件有请输入代码6种不同的文件格式，因此我们可以使用首选设计软件中的图标。...从企业和办公室设置到人，食物和社交媒体图标。 这些图标旨在模仿特定操作系统的外观。 我们可以在Windows，iOS 和 Android 版本中下载它们。...自然，它们是完全免费的，并且可以在GitHub上使用。 我们甚至可以使用CDN版本的样式表将这些图标直接添加到的站点中，它也支持 SVG 和 Web 字体。...这也是在引导时为团队设置的默认图标。 它还可以作为SVG图标以及其他格式使用。该许可证对任何商业或个人用途都是免费的。 每个图标都是完全可伸缩的，并且可以直接在CSS中维护。

2.7K20

svg矢量图绘制以及转换为Android可用的VectorDrawable资源

项目需要 要在快速设置面板里显示一个VoWiFi图标（为了能够区分出来图形，我把透明的背景填充为黑色了） 由于普通图片放大后容易失真，这里我们最好用矢量图（SVG(Scalable Vector Graphics...)）来做图标，而系统状态栏图标多是用vectorDrawable绘制，所以我们的最终目的就是绘制一个上图中样式的Android VectorDrawable xml图标。...尤其是这种资源文件体积小放大又不失真，干嘛不用呢。 VectorDrawable Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源，也就是矢量图。...在xml文件中的标签是 google官方API介绍： https://developer.android.com/reference/android/graphics/drawable/...可能是这个工具开发比较早，有很多Star，基本的图形转换是可以的，但是，不支持文字！也就是说上面的图，如果我们转换的话，得到的结果只是一个椭圆，文字会丢失。

2.4K90

使用纯CSS给网站文章中的外链添加小图标

最近突然有一个想法，文章中的链接不够明显，可不可以在不修改类名的前提下，给所有 a 标签添加一个图标呢？ 答案是肯定的，只有想不到，没有做不到。...我们可以分析一下， bootstrap 的组件图标库。 它们在图标标签上加了一个伪类，这个伪类就代表了相对应的图标。 ? 那么我可以直接拿这个标识来用吗？...我们先看一下字体的 CSS 源码，这里以阿里图标库的 iconfont 生成的 CSS 文件为例： @font-face {font-family: "iconfont";   src: url('iconfont.eot...t=11111') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */   url('iconfont.svg...也可以直接生成 Unicode 代码，放在你 CSS 样式文件的开头，就可以愉快的给某个元素批量设置自定义图标了。

1.6K30

Web图标的工程化方案

可以使用工具脚本在本地项目中将SVG文件生成iconfont，更方便地管理项目图标。需要在项目中安装以下依赖库。...svg其实很早就出现了，只不过由于兼容性的问题，早前并没有很好地发挥出它的价值，但随着IE6/7/8退出舞台， android 4.x 的开始，很多网站都开始使用svg作为图标方案 。...在实际项目中我们会有很多图标，将零散的svg合并，每个图标有唯一的symbol，通过symbol来引用。将symbol定义插入到页面body中，然后在需要使用的地方通过引用。...示例项目使用vue cli 3搭建，vue.config.js相关配置如下，我们会将图标文件放在一个特定的目录中，针对该目录下的文件，会将默认的loader配置排除，使用svg-sprite-loader...微信图片_20191215163114.png 我们就可以在页面中使用这些图标了，同时可以封装通用icon调用组件，将图标name，size，color都作为参数，就能方便控制图标的使用。

1K10

Android Oreo 常见问题 2.0 | Android 开发者 FAQ Vol.9

在第一期 Android Oreo 8.0 开发者 FAQ 中，我们为了尽快让大家快速了解 Android Oreo 的新特性，以及它与之前版本 Android 的区别，我们针对 Android Oreo...A: 通知圆点没有提供在上述设备默认的启动器（Launcher）中的支持（即便您可以在 Setting 中看到开关通知圆点的选项）。...另外，开发者可以修改通知显示的细节，如果您对通知显示不满，也可以直接联系该应用的开发者来向他们提供反馈。 Q: 关于应用图标的新样式，为什么和以前看起来不一样？...A: 在 Android 8.0 中，应用图标现在已经规范成了圆形或者方形。如果该应用支持全新的 “自适应图标” 的功能，那么图标将会根据您的设备选择一个固定展现的形状。...A: Android Oreo 系统特意对快速设置面板及通知栏的颜色做了调整，为用户带来更舒适的感官体验。目前不提供修改这个面板颜色的选择，但我们会继续倾听您的反馈并作为接下来的设计参考。

1.9K70

小图标，大学问

svg 和 html 在语法上非常像，都是 xml 语系，只是使用了不同的命名空间（xmlns），因此我们可以把 svg 作为一个元素内联到 html 中，现代浏览器可以正确地解释它们。...使用 use 标签，你可以根据 id 引用本页面中的 svg 元素，甚至来自其它 svg 文件中的元素。...难道我们要在每个使用它的地方都手动覆盖一下颜色吗？当然不必，我们还有另一个特性可以解决这个问题，那就是 currentColor。这是一个预定义的特殊颜色值，它的意思就是取当前的文字颜色。...因此，虽然“合字”本身没有多少新的技术，但是我仍然把它归于“当代”，它值得作为一种趋势受到重视。 图标在开发中的其它方面 在实际的开发工作中，还有一些问题需要考虑。 ?...当然，如果你使用 Angular 这样的现代框架，你就不需要为此做什么额外的工作了。你只要把每个图标做成一个组件，使用 svg 内容作为模板，然后像普通组件一样引用它就可以了。

1.3K10

【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )

; png , jpeg 等位图会随着图像缩放 , 出现模糊的情况 ; Android 中使用 SVG 矢量图 , 能极大的减少占用空间的大小 ; 应用中使用的小图标 , 一般都使用 SVG 格式 ;...PhotoShop 或 illustrator 等绘图软件 , 可以直接导出 SVG 格式的图片 ; SVG 图片显示 : SVG 图片数据 : SVG 格式的图片文件 , 是一个 XML 格式的文本...中 , 不能直接使用标准的 SVG 文件 , 使用 Vector Assets 实现对 SVG 图片格式的支持 , Vector 矢量图也是 XML 文件 , 根节点必须是 , 并且内容格式也有一定的不同...; SVG 图片的根节点是 ; Vector 资源的根节点是 ; 在 Android Studio 中 , 右键点击 res 资源目录 , 选择 " New / Vector..., 即可选择 Android 内置的材料设计 ICON 图标 ; 如果 UI 设计了 SVG 图像 , 可以选择 " Local file ( SVG, PSD ) " 选项 , 从外部文件路径中

1.2K30

更加优雅的使用Icon

SVG Icon ，然后再写一个 Vue 组件 统一的去加载它，在每次需要使用图标时就去下载一个 SVG 图标到 Icon 模块中，使用组件并传入...如上，我们可以看到，除了在浏览器支持上，SVG 图标是完胜字体图标的，至于浏览器支持吗，在当下这个 Chrome 内核霸主时代也就没有了意义。 好了，接下来就开始实战了！...，你可以直接让设计师导出一个 SVG 文件给到你。...还是以 Vue3 + VueCLI 为例子，我们先来做一些准备，首先在 src/assets 目录下新增 svg/ 目录（按自己喜好定义），我们可以按照模块在 svg/ 下建不同的文件夹，这些文件夹用来存放我们自定义的...svg/ 目录下的每个文件夹作为一个模块，其下文件使用 loader 解析即可，然后就可以快乐的使用了： <IconBaseline5g

5.3K30

第104天：web字体图标使用方法

只能使用平台里单色的图标，就算项目里有多色图标也会自动去色 　　注意：新版iconfont支持多色图标，这些多色图标在Unicode模式下将不能使用，如果有需求建议使用Symbol的引用方式 　　使用步骤如下...--"iconfont"是你项目下的font-family，默认是"iconfont"--> 3是字体编码，可在下载的demo.html中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看...--"iconfont"是你项目下的font-family，默认是"iconfont"--> icon-xxx是使用了unicode引用的类名，可在下载的demo.html中查看，或者可以在阿里矢量图标库的网站上...，建议将字体文件放在fonts目录下，这样我们需要修改@font-face下的url属性， src: url('...../fonts/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ } 第五步： 把下载好的文件导入我们的工程里，如图 ? ?

1.4K10

Vue项目中优雅使用icon

搭建项目 怎么样才算优雅，首先我们在src目录下新建icons/文件夹，在icons/文件夹下建svg/文件夹，将来我们项目中的svg图标都会统一放在这里 接下来我们在官网搞来一个svg图标 点击svg...的loader对我们icons/目录下svg文件的处理，然后新增了一个规则让svg-sprite-loader处理我们icons/文件夹下的svg文件，最后我们设置了icon-加上经过处理的svg文件名作为...symbolId，也就是说我们在使用qq.svg时可以直接在use标签使用#icon-qq，关于链式操作不了解的小伙伴可以看: 链式操作(高级) 代码中我们引入了path这样一个内置的包，定义了一个resolve...现在我们就可以在你想使用图标的位置使用了，使用方式如下 在main.js中引入(全局引入)要使用的图标文件 import "@/icons/svg/qq.svg"; 模版中使用 <use...不，还远远不够，这样使用一个图标就得引入文件一次也太麻烦了，接着看下文 进阶-svg文件自动引入 知道为什么在icons/文件夹下还有一个存放svg文件的svg/文件夹吗，就是为了这一步自动化引入准备的

2.1K20

来自一位五年Android工程师APK体积优化的一些总结

1. svg的使用与优化 首先我们先来了解一下什么是svg在百度百科是这么说的！！！，其实我们只要关注主要的概念就好了！可缩放的矢量图形。其实人话就是在不同大小的地方显示不变形！...我特意找了个网站阿里矢量图，在这个网站中你可以下载各种的矢量图，然后呢？就没有然后了。。。 下载之后呢？会有一个丑丑的ie浏览器的图标后缀为.svg的东西！这个怎么用呢？...强大的android studio 为我们做好了准备工作！ res->new->vector Asset ? 之后会蹦出来这么个玩意 ? 前一个红框是系统的图标，后一个是本地的图标！...关于上面这两个问题，我们分别来说一下： 1. 首先svg是可缩放矢量图，所以呢？你在项目中只要添加一张svg就可以替换相应的之前美工给你的一套图，一下减少了好几张图片，你说是否有关系呢？...其实你可以解压比较大型的项目，其实没有那么多so文件的类型！ 平时我们开发的时候，基本上都是这么写的！

1.6K31
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券