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

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

因为它们也可以变为彩色的。 黑白的也好，彩色的也罢，如果用传统的“css + 图片”的方式来制作这些icon，我估计你至少得雇佣一个专业的设计师吧。...，看具体情况*/ } 嗯，就是用实际元素占位，用伪元素+content属性显示icon，然后覆盖到实际元素上面，之后我们修改某个icon只需要更改css样式就可以了。...例如，我要在页面中显示一个“链接”的图标，我可以这么写： 链接 此时页面将显示： 显示是显示出来了，那么对应链接的这个css...进入官网的icon页面，里面有所有的icon的css类，就可以找到你想要的那个图标的css类了。...FontFamily的设置，我是采用的嵌入字体的方式，这样在没有装该字体的机器上也是能正确显示图标的。

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

小程序Canvas实践指南

2.2 绘制动画 现阶段小程序内简易的动画绘制常用的方案主要有以下四种： 动画类型 实现原理 存在缺陷 CSS animations 使用 CSS渐变和 CSS动画来创建简易的界面动画 真机上偶现 闪烁和...所以对于 Canvas 开发，想要解决层级覆盖的问题，最有效的方法是将旧的 API 改造成新的 Canvas 2D API。 3.2 为什么字体无法加粗？...微信开放社区有人提问，为啥我做了如下设置，在模拟器上可以加粗，安卓机上加粗却没有效果。...font-weight CSS属性指定了字体的粗细程度。一些字体只提供normal和bold两种值。,为了安全起见，加粗用 bold。...从上面的图可以看出，在同样大小的逻辑像素下，高清屏所具有的物理像素更多。普通屏幕下，1 个逻辑像素对应 1 个物理像素，而在 dpr = 2 的高清屏幕下，1 个逻辑像素由 4 个物理像素组成。

3.3K53

雅虎军规第四天

说说图片和cookie的雅虎军规 1、 压缩再压缩，一个HTM加载的时候图片的加载时间真的很长很长，所以能不使用图片就不要使用，能压缩绝对要压缩，图标什么的都使用字体图标。...2、 优化css 的sprite 其实就是处理雪碧图，把他整成最合适最优化的图片，没用过，所以不懂原理。...3、 不强制压缩图片 我们需要使用多大的图片就使用多大的图片，别把宽高500的图片设置成宽高100的图片。...4、 有favicon 我们都知道每个项目浏览器访问的时候都会加载favicon，之前css就提到过千万不要有404出现，所以最好每个项目都配好这个图标，因为不管你用不用，浏览器都会去请求。...所以它们只会造成没有意义的网络通信量，应该确保对静态组件的请求不含cookie。可以创建一个子域，把所有的静态组件都部署在那儿。当然，具体怎么配置我就不懂了。 （完）

33710

无图片字体icon

字体文件小，一般在20K左右吧（icon图片各种尺寸大小以及各种图标多） 容易编辑和维护，可用css直接对字体控制大小和颜色（图片的话修改一个也许是修改好几个尺寸） 透明完全兼容IE6（图片透明度兼容不好...双击或全选某个字符，删除原有的图形，粘贴刚复制的icon对象。生成字体文件就可以了。 ? 查看字体对应字符，在该字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符： ?.../fontface/generator强大的在线转ttf为eot、woff等字体格式 另外，eot文件必须添加域名白名单才可以使用，推荐使用CreateMyEOT： 最后是字体文件跨域问题： 这个是在实际项目中出现的问题...例如我这个把文件往上面一拖，把这段编码copy到css文件就行。(注：此工具是同事as3long制作。特此感谢。) ? 总结： iconfont已经很强大了，轮子是否需要继续创造，就看团队了。...css3很强大，html5标准也终于完工，未来的路很长，人很累，所以先吃饱再说。

2.4K90

第三届 CSS 开发者大会笔记

如果要让第二条生效，可以这么写 .bar{ background: green !important; } 不推荐这么写。因为这么写后，别的地方就覆盖不了。...主要内容 介绍了 weex 的工作原理，在 CSS 方面的支持和weex的优势。 需要注意的是 weex不支持 CSS 的继承(CSS 是否需要继承，存在争议)。...主要内容 所有的变换都可以用矩阵表示。展示了一大堆酷炫，屌炸天的 demo。 ---- 第七场：CSS的隐藏绘画功能和交互动画技巧 演讲者信息 Wenting Zhang。...这也就是 CSS 变量相比 Sass 变量的一个优势：Sass 变量的值不能通过JS来修改。 她推荐可以通过画图标来提高 CSS 水平。她在拖延症犯的时候，就画个图标。...目前已经画了 512 个图标，见 CSS ICON。 Live Coding 的胡子 我很喜欢她设计的适合 CSS 的字体: CSS-Mono。

1.4K20

element-ui图标偶现乱码问题的原因和修复方法

立马跑到线上去排查，在自己电脑上登录进去看样式也没啥问题呀，然后审查元素才看到字体图标的 content 里确实是乱码： 自己在本地 build 打包看了下源码，dist/css/app.xxx.css...，里面的字体图标的 content 也确实是乱码： 解决方式 网上搜了下，很多人遇到这个问题，偶现发生，一般刷新下页面又好了，解决方式主要有3个： 由 dart-sass 改回 node-sass 自己额外引入...element-ui 的图标 css 文件 sass 版本更新到 1.39.0，并且修改 vue.config.js 配置文件的 css.loaderOptions.sass.sassOptions.outputStyle...、additionalData sassOptions: { outputStyle: 'expanded' } // fix: 解决 element-ui 图标 icon 偶现乱码问题...Issuse： 使用dart-sass打包element icon出现乱码：https://github.com/ElemeFE/element/issues/21763 页面刷新有时候elementui 的字体图标会乱码

64820

小图标，大学问

如果我们把大量图标塞到 css 甚至 html 中，就会增大它们的体积，导致首屏展现变慢。 所以，是否使用 Data URL 技术需要仔细权衡，根据性能测量数据进行优化。...这本来是为了解决让浏览器显示更好看的文字而创造的技术，比如要想用一种用户机器上没有的字体显示艺术字，我们只需要提供一个字体文件，这些字体文件包含我们要用的那些文字的字体轮廓数据就可以了。...难道我们要在每个使用它的地方都手动覆盖一下颜色吗？当然不必，我们还有另一个特性可以解决这个问题，那就是 currentColor。这是一个预定义的特殊颜色值，它的意思就是取当前的文字颜色。...即使你不需要彩色图标，凭借 svg 对元素透明度的支持，也可以让你的图标比字体图标更加丰富多彩。 二是图标的大小不会自动跟随字体大小。...我所知道的最早使用合字的图标体系是 Google 的 Material Design，比如用 home就可以显示出一座房子，它是怎么工作的呢？

1.3K10

element-ui图标偶现乱码问题的原因和修复方法

立马跑到线上去排查，在自己电脑上登录进去看样式也没啥问题呀，然后审查元素才看到字体图标的 content 里确实是乱码：自己在本地 build 打包看了下源码，dist/css/app.xxx.css，...里面的字体图标的 content 也确实是乱码：解决方式网上搜了下，很多人遇到这个问题，偶现发生，一般刷新下页面又好了，解决方式主要有3个：由 dart-sass 改回 node-sass自己额外引入...element-ui 的图标 css 文件sass 版本更新到 1.39.0，并且修改 vue.config.js 配置文件的 css.loaderOptions.sass.sassOptions.outputStyle...icon 偶现乱码问题 } } }, devServer: { proxy: { '/api': { target: 'http:/...dart-sass 只支持两种输出格式outputStyle：expanded：输出跟我们平时开发中手写的css样式很像，选择器、属性等各占一行，属性根据选择器缩进，而选择器不做任何缩进compressed

34820

Custom Beautify

字体样式API实际上可以拆解成如下类型： 首先需要下载心仪的字体。此处推荐一个免费的字体库网站，支持在线转换预览和免费字体包下载。 这里我选择的一款叫做甜甜圈海报字体。根据页面按钮找到字体下载。...得到相应的字体文件。为了方便起见，我将其重命名为Candy.ttf。 将下载好的字体包放到本地文件夹下，这里推荐新建一个fonts文件夹。...不过optional选项可以让浏览器自由决定是否使用自定义字体，而这个决定很大程度上取决于浏览器的连接速度。如果速度很慢，那你的自定义字体可能就不会被使用。...可以隐藏所有的信息，包括div下的文本和图片,同时被隐藏的内容不占用空间。...visibility: hidden visibility属性规定元素是否可见。这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。

2.3K20

每个前端都需要知道这些面向未来的CSS技术

其实还可以更强大一点，如果你对CSS Houdini熟悉的话，可以借助其特性，直接在CSS的代码中来操作CSS自定义属性 :root { --property: document.write('hello...如图不依赖媒体查询实现自动计算 屏幕录制2021-07-27 下午3.17.46.gif CSS Grid中提供了很多强大的特性，比如： fr单位，可以很好的帮助我们来计算容器可用空间 repeat(...，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标 当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题 随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。...该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显 SVG和img有点类似，我们也可以借助标签和标签，将所有的SVG图标拼接在一起，有点类似于

87040

VScode编辑器神插件！让你入门前端轻松打怪升级！

外观配置 外观是最先考虑的部分，从配置的角度，无非是配色、图标、字体等，俗话说萝卜白菜各有所爱，我目前的配色、图标、字体从下图基本都能看出来，供大家参考： ?...，但是效果绝对是值当的； 配色、图标、字体以及其他外观配置项具体如下（注意，如果不安装上述插件，部分配置项如果直接使用是无效的）： ?...VSCode 内置的智能建议已经非常强大，不过我对默认的配置做了如下修改，以达到类似于在 Vim 中那样在任何地方都启用智能提示（尤其是注释和字符串里面）： ?...，如果觉得不适合你，可以改（找个现有的插件依葫芦画瓢），我常用的代码片段插件如下： HTML Snippets，各种 HTML 标签片段，如果你 Emmet 玩的熟，完全可以忽略这个； Javascript...； Emmet，以前叫做 Zen Coding，我发现后，也是爱不释手，可以把类 CSS 选择符的字符串展开成 HTML 标签，VSCode 已经内置，官方介绍文档参见，你需要做的就是熟悉他的语法，并勤加练习

1.9K40

每个前端都需要知道这些面向未来的CSS技术

其实还可以更强大一点，如果你对CSS Houdini熟悉的话，可以借助其特性，直接在CSS的代码中来操作CSS自定义属性 :root { --property: document.write('hello...如图不依赖媒体查询实现自动计算 [屏幕录制2021-07-27 下午3.17.46.gif] CSS Grid中提供了很多强大的特性，比如： fr单位，可以很好的帮助我们来计算容器可用空间 repeat...，面对多种设备终端，或者说更易于控制图标颜色和大小，开始在使用**Icon Font**来制作Web图标 当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件...，相应的也带了一定的问题，比如说跨域问题，字体加载问题 随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。...该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显 SVG和img有点类似，我们也可以借助标签和标签，将所有的SVG图标拼接在一起，有点类似于

62230

这些CSS的新特性还是有必要进来瞧瞧的

其实还可以更强大一点，如果你对CSS Houdini熟悉的话，可以借助其特性，直接在CSS的代码中来操作CSS自定义属性 :root { --property: document.write('hello...如图不依赖媒体查询实现自动计算 屏幕录制2021-07-27 下午3.17.46.gif CSS Grid中提供了很多强大的特性，比如： fr单位，可以很好的帮助我们来计算容器可用空间 repeat(...，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标 当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题 随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。...该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显 SVG和img有点类似，我们也可以借助标签和标签，将所有的SVG图标拼接在一起，有点类似于

78620

每个前端都需要知道这些面向未来的CSS技术

其实还可以更强大一点，如果你对CSS Houdini熟悉的话，可以借助其特性，直接在CSS的代码中来操作CSS自定义属性 :root { --property: document.write('hello...如图不依赖媒体查询实现自动计算 屏幕录制2021-07-27 下午3.17.46.gif CSS Grid中提供了很多强大的特性，比如： fr单位，可以很好的帮助我们来计算容器可用空间 repeat(...，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标 当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题 随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。...该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显 SVG和img有点类似，我们也可以借助标签和标签，将所有的SVG图标拼接在一起，有点类似于

74130

04-移动端开发教程-在线字体

节省了带宽（相比图片）字体文件大小也不大（一般几百k）。 在线字体本身是矢量的，放大缩小都不会失真 可以灵活的通过css来控制字体图标的大小、颜色、阴影等 可以方便的自定义字体图标 2....Font Awesome 提供了高可用性的矢量图标字体。它可以用强大的CSS自定义图标的大小、颜色、图标阴影等。...自定义字体在线工具 有很多可以直接在线编辑和上传自定义字体的工具和网站。其中：icomoon就是比较常用的一个在线制作字体的网站。有很多免费的字体可以用，而且可以在线编辑和上传。 ?...此在线工具可以选择图标、增加图标、修改图标、移动图标、上传图标等操作，操作完成后选择要下载的图标然后选择右下角的生成字体，然后就可以下载字体了。...字体下载下来后，可以直接用它提供的字体文件和样式类型文件。 其他： 定制自已的字体图标库 http://iconfont.cn/

3.2K60

一看就会的iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!...往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;  我现在将第一个安卓图标加入我的项目,点击加入购物车 step 4: 添加到购物车完成后,购物车徽章数字应该显示...iconfont.css文件; 下载下来解压后的文件如下: 强调一次,把上面这些文件都放在一个文件夹内，然后放在你的项目目录中,再在你的项目中引入iconfont.css文件 step 6: 到了最后一步了...,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名: 具体代码如下: 好了,刷新页面,图标是不是出来了呢...那就从头再看一遍; 调节字体图标的大小是通过元素的font-size属性来控制的; 也可以直接引用我的 https://blog.wenwuhulian.com/zb_users/theme/cardslee

1.7K20

Vue + Element UI 实现权限管理系统 前端篇（十一）

使用第三方图标库 用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。...Font Awesome Font Awesome 提供了675个可缩放的矢量图标，可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。...Font Awesome 5 跟之前的版本使用方式差别较大，功能是强大了，图标也更丰富了，但使用也变得更加复杂了。...新建项目 选址图标管理，我的项目。 ? 点击右侧新建项目按钮新建一个项目。 ? 输入项目相关信息，注意前缀不要跟项目现有的冲突。 ? 选取图标 进入图标库，选址自己喜欢的图标库。 ?...进入图标库选择自己喜欢的图标加入购物车，因为没有批量加入，一个个点简直要命，在控制台输入以下命令可以批量添加。

1.2K40

认识 Iconfont 以及什么是 .eot、.woff、.ttf、.svg「建议收藏」

图标 在写这篇文章之前，我一直以为上图中的“图标”是一个个的图片组成，但学习总是给人新知，现在我知道了它们只是一种字体，类似于“宋体”、“楷体”这种。...如果我们要使用它们，也只需要在 css 文件中使用 @font-face 引入这种字体即可。@font-face 是 css3 的一个语法，刚兴趣的可以自行阅读 @font-face 用法 。 2....Iconfont 介绍 Iconfont 是阿里提供了一个图标库，你可以想象成是一个售卖图标的超市，挑选你需要的图标放入购物车，然后 Iconfont 会为你打包你购物车里的图标，自动生成一种新的字体，...你可以选择下载到本地，在你的项目中引入这种字体，这样即便没有网络的情况也可以使用图标。...这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。

2.1K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券