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

当我使用不同的类时,我的字体图标不工作

当您使用不同的类时,字体图标可能不起作用的原因可能有以下几种:

  1. 字体文件未正确引入:字体图标通常是通过引入字体文件来实现的。您需要确保在HTML文件中正确引入了字体文件,并且路径是正确的。您可以通过在CSS文件中使用@font-face规则来引入字体文件,或者使用外部库(如Font Awesome)来引入字体图标。
  2. 类名错误:字体图标通常通过在HTML元素的class属性中添加特定的类名来显示。您需要确保在使用字体图标的HTML元素中正确添加了相应的类名。通常,字体图标库会提供一个文档,列出了可用的类名和对应的图标。
  3. 字体文件未加载成功:有时,字体文件可能由于网络问题或其他原因未能成功加载。您可以通过检查浏览器的开发者工具(如Chrome的开发者工具)来查看网络请求是否成功,并确保字体文件被正确加载。
  4. CSS样式冲突:如果您的字体图标与其他CSS样式发生冲突,可能会导致字体图标不起作用。您可以通过检查CSS样式表中的相关样式,并确保它们不会干扰字体图标的显示。

总结起来,当您使用不同的类时,字体图标不工作可能是由于字体文件未正确引入、类名错误、字体文件未加载成功或CSS样式冲突等原因导致的。您可以逐一排查这些可能的原因,并进行相应的修复。

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

相关·内容

分享用Qt开发应用程序【二】在Qt应用程序中使用字体图标fontawesome

为了使用简单,需要先写一个单件,头文件代码如下: 其中静态方法Instance保证IconHelper实例全局唯一 (注意构造函数已经私有化了) #ifndefICONHELPER_H #defineICONHELPER_H...应用程序所在目录下创建res目录,并放置字体文件/res/fontawesome-webfont.ttf 然后加载到全局字体中 #include"IconHelper.h" IconHelper*IconHelper...SetIcon(ui->RightBtn,QChar(0xf178),12); 详见:http://fontawesome.io/cheatsheet/ ----------------------- 又开发了一个桌面日历小程序分享给大家...1、黑色背景是桌面颜色,大家可以忽略 2、虽然右键菜单里写了“开机自启动”,但我并没有开发这个功能,请见谅 3、我会在下一篇文章里公布这个小程序源码,敬请期待 4、这个小程序会始终在你桌面上,...你点显示桌面,它还是在你桌面上 ?

1.8K70

绝对干货 | Kotlin内联工作原理及使用案例,看完你会回来谢

这正是Kotlin中内联一大卖点:内联,除非绝对必要,否则本身不会在字节码中使用。内联大大减少了运行时空间开销。 运行时 在运行时,可以将内联表示为包装类型和基础类型。...它必须改为使用装箱类型。打印其内容,将调用unbox_impl。在调用地方,我们可以看到box_impl用于创建WrappedInt装箱实例。 显然,我们希望尽可能避免装箱。...但是,某些用户将以不同方式调用此方法并不困难: auth("12345", "user1") 由于这两个参数均为String类型,因此您可能会弄乱它们顺序,当然,随着参数数量增加,这种顺序可能性更大...() = jacksonObjectMapper().readValue(this.value) 当我们引入用于保存JSON数据字符串包装器并相应地将扩展名更改为使用JsonString接收器...由于内联仍处于Alpha阶段,因此您必须接受未来代码会由于其行为更改而在将来版本中失效。这一点我们要记住。不过,认为现在就开始使用它们是有合理。 ?

58320
  • 绝对干货 | Kotlin内联工作原理及使用案例,看完你会回来谢

    这正是Kotlin中内联一大卖点:内联,除非绝对必要,否则本身不会在字节码中使用。内联大大减少了运行时空间开销。 运行时 在运行时,可以将内联表示为包装类型和基础类型。...它必须改为使用装箱类型。打印其内容,将调用unbox_impl。在调用地方,我们可以看到box_impl用于创建WrappedInt装箱实例。 显然,我们希望尽可能避免装箱。...但是,某些用户将以不同方式调用此方法并不困难: auth("12345", "user1") 由于这两个参数均为String类型,因此您可能会弄乱它们顺序,当然,随着参数数量增加,这种顺序可能性更大...() = jacksonObjectMapper().readValue(this.value) 当我们引入用于保存JSON数据字符串包装器并相应地将扩展名更改为使用JsonString接收器...由于内联仍处于Alpha阶段,因此您必须接受未来代码会由于其行为更改而在将来版本中失效。这一点我们要记住。不过,认为现在就开始使用它们是有合理

    1.3K30

    不懂设计产品不是好开发

    通常情况下,公司有自己品牌字体,但我们不需要在应用程序中使用他们字体。 为了应用一个字体系统,首先,从Google Fonts中挑选了三种字体。...在演示应用程序中,仍然在body和captions中使用了富有表现力Rightheous字体,以达到演示目的,尽管推荐这样做。 4. Shape 形状被用来表达品牌和强调用户界面的不同部分。...它们可以以光栅或矢量图像形式下载。比起光栅图像,更喜欢矢量图像,因为它们是可伸缩,而且尺寸更小。 Material图标也可以在Web和Flutter项目中作为图标字体使用。...考虑到品牌形状,ATA将使用圆形图标,Biohack将使用尖锐图标,Codeland将使用填充图标。 Conclusion 在这篇文章中,解释了主题属性和相应Material设计指南。...开发了多年应用程序,却不知道其中一些细节。在公司工作,设计师同事负责这些细节并为提供设计。当我开始从事自己项目不得不自己建立一个设计系统。这篇博文中细节对帮助很大。

    2.5K20

    Office LTSC 2021 for Mac(office全家桶)v16.65中文版

    包含Word、Excel、PowerPoint、Outlook、OneNote等多个工具,轻松进行工作,改善使用体验,强大功能,一如既往好用,提高工作效率必备神器,使用最先进编辑、审阅和共享工具创建和共享具有专业外观文档...每当我们点击一个Ribbon面板,Office都会自动弹出一个动画特效。整体感觉很像是Win10特有的窗口淡入与淡出。...3、在线插入图标制作PPT我们常会使用一些图标,大多数图标结构简单、传达力强,却并不好找。最新版office 2021则增加了在线图标插入功能,让我们可以像插入图片一样一键插入图标。...通常情况下,当我们将一个Office窗口从高分辨率显示器移动到低分辨率显示器,微软都会自动使用一种叫“动态缩放DPI”技术,来保证窗口在不同显示器间仍保持适合大小。...7、自带中文汉仪字库之前小编一直很羡慕WPS字体功能,尤其在进行一些排版工作,这一特性真的非常非常实用。在office 2021中,发现微软又新增加了几款内置字体

    65120

    Microsoft Office LTSC 2021 for Mac(office系列全套装)v16.64中文激活版

    当我们点击一个Ribbon面板,office都会自动弹出一个动画特效。整体感觉很像是Win10特有的窗口淡入与淡出。...亮点3:在线插入图标制作PPT我们常会使用一些图标,大多数图标结构简单、传达力强,却并不好找。最新版office 2019则增加了在线图标插入功能,让我们可以像插入图片一样一键插入图标。...通常情况下,当我们将一个office窗口从高分辨率显示器移动到低分辨率显示器,微软都会自动使用一种叫“动态缩放DPI”技术,来保证窗口在不同显示器间仍保持适合大小。...亮点7:自带中文汉仪字库之前小编一直很羡慕Wps字体功能,尤其在进行一些排版工作,这一特性真的非常非常实用。在office 2021中,发现微软又新增加了几款内置字体。...这些字体全部属于汉仪字库,都是一些书法感很强字体风格。狗年到了!用word写个对联,你会发现比以前方便多了。

    67120

    Microsoft Office LTSC 2021 for Macv16.65 beta版

    当我们点击一个Ribbon面板,office都会自动弹出一个动画特效。整体感觉很像是Win10特有的窗口淡入与淡出。...亮点3:在线插入图标制作PPT我们常会使用一些图标,大多数图标结构简单、传达力强,却并不好找。最新版office 2021则增加了在线图标插入功能,让我们可以像插入图片一样一键插入图标。...通常情况下,当我们将一个office窗口从高分辨率显示器移动到低分辨率显示器,微软都会自动使用一种叫“动态缩放DPI”技术,来保证窗口在不同显示器间仍保持适合大小。...亮点7:自带中文汉仪字库之前小编一直很羡慕Wps字体功能,尤其在进行一些排版工作,这一特性真的非常非常实用。在office 2021中,发现微软又新增加了几款内置字体。...这些字体全部属于汉仪字库,都是一些书法感很强字体风格。狗年到了!用word写个对联,你会发现比以前方便多了。

    90540

    前端工程师如何干掉设计

    当你不具备以上开发环境和工具这里推荐一个压缩图片网站,地址为:https://tinypng.com/。   ...2.图标下载   很多时候当我团队中缺乏设计或者设计不在,如果项目中需要一个logo或者图标,我们其实可以自己搞定。...当我们选择需要图标,会出现详细下载页,我们可以选择我们需要图标格式比如PNG、ICO或者ICONS,同时我们还可以选择需要图标大小进行下载,如下: ?   ...3.字体下载   这里字体主要指纯色字体图标,现在很多网站icon图标都是以字体形式嵌入,这样我们可以一定程度减少网页中图片请求数量,同时也便于维护。...这里推荐几款比较热门字体图标库:   (1)阿里巴巴矢量图标库:http://www.iconfont.cn/   通过淘宝这个图标库,我们可以轻松管理及下载我们需要字体图标,同时还可以制作和上传我们图标

    2.1K40

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

    接下来,就从外观配置、风格检查、编码效率、功能增强等 4 方面来侃侃怎么配置 VSCode 来提高工作幸福感。...外观配置 外观是最先考虑部分,从配置角度,无非是配色、图标字体等,俗话说萝卜白菜各有所爱,目前配色、图标字体从下图基本都能看出来,供大家参考: ?...配色:Solarized Dark,VSCode 已经内置,使用了至少 5 年以上主题,Vim 下配置完全相同; 图标:VSCode Great Icons,给不同类型文件配置不同图标,非常直观...; 字体:Fira Code,自从发现并开始使用 Fira Code,就再也没多看自其它字体一眼,字体如果比较优雅,尤其是对数学运算符处理,写代码你真的会感觉在写诗,哈哈,Fira Code 安装过程稍微复杂点...,但是效果绝对是值当; 配色、图标字体以及其他外观配置项具体如下(注意,如果不安装上述插件,部分配置项如果直接使用是无效): ?

    2K40

    字体图标的绘制和使用技巧

    从事前端朋友应该对“字体图标”这个词汇陌生,为了适应越来越挑剔屏幕,网页图标和简单图案使用 .png 来搭建已经基本上被淘汰了。...取而代之使用 css3 和 svg 来绘制,而对于网页小图标,我们更希望在整个系统前端架构中将它们做成字体库统一管理。如下图: ?...是主后端程序员,很早以前就在项目中使用字体图标,但是之前用于制作图标 svg 都是美工帮我画好,所以一直没有深究其中原理,直到近期不得不自己制作才对其好好研究了一下。...下面从svg绘制和代码实现两方面将初次制作字体图标遇到坎和大家分享一下,愿后来者不要入坑。...一直以为是绘制问题,实在找不到原因,于是改变画布大小在尝试,这种做法可能有点傻,尝试之前就知道矢量图尺寸跟文件大小没有一丁点关系,但是也算是瞎猫碰上死耗子,当我增加了一个小画板再存储时候看到了

    1.4K100

    视觉调整-设计师 vs. 逻辑

    播放按钮中三角形是居中?错。在圆中居中画一个三角形,看起来是不平衡。 左侧播放图标看起来是居中,但是它在矩形中却是居中。...左边图标和文字使用相同颜色,左侧使用不同颜色。为了做到相同视觉感觉,在sketch中加深了文字“HSB”值。 这看来很微妙,但是你可以看到图标比文字看起来颜色深一点。...要调整它,要么让图标变亮或者让文字变暗一点——建议你选择那个能够让你达到Web内容无障碍指南颜色。...推荐在你设计中使用HSB | HSL值,除去其他优势,这样可以使用“L”和“B”来快速调整颜色亮度。 规模 规模我们大脑对于物体包含字体尺寸感知。...如果你使用Garamond字体写一行,然后在基线和X字高画两道线,你会发现曲线会超过这两条线。如果这些超出不存在,你就会发现这些字母相对于旁边字母显得太小。

    55410

    Fontello:免费Web-font 图标大集合(font-face 图标集)

    当我知道这个网站存在,就知道非常有必要将此分享给大家。Fontello,一个目测有200+个图标(数量还在增加) Web-font 图标市场,对于广大设计师、前端开发者来说就是宝藏。...最佳方法应该是使用矢量图标。...,折腾出了个 Web-font ——就是将某些矢量图标做成字体文件,然后通过@font-face 这个在网页中使用。...Fontell 使用方法 使用方法: 选择想要图标,然后点击右上角红色按钮下载 解压下载回来 zip,把里面的文件上传到你网站 下载回来包有个 demo.html,这里可以看到相对应名(class...利:矢量图标,可以完美支持 放大、改变颜色 等 CSS 层面的修饰而无失真 弊:兼容某些浏览器(IE)、同比图片式图标,加载文件容量(字体文件、CSS文件)更大;如果考虑hack,加载更多CSS

    1.8K60

    网站图标开发指南

    html> 在刚开始写页面的时候就是这样做,感觉 so easy,直到业务变得越来越复杂,就不得不思考以下几个问题: 图标需要适配多个客户端 图标太多需要优化 图标需要动态修改颜色 对于适配多个客户端问题...: -56px 0px; } .icon3 { background-position: 0px 0px; } 可以看到,使用雪碧图布局,所有的图片都使用了同一张大图,然后使用背景图去定位,以区分不同图标...字体图标使用方式 字体图标使用方式特别方便,我们只需要在页面中引入对应字体文件,然后编写对应字符就可以了。 字体图标有两种写法: 直接编写 Unicode 编码。...当我们匹配到对应区域,就能进行对应颜色修改了,一张多色 SVG 图也就做好了。 ?...传统图标,简单粗暴,切好图就能用,但需考虑不同尺寸以兼容不同设备,图片颜色不好更改。 字体图标,需要引入字体文件,然后编写特定字符,可以很方便修改颜色,但只能是单色。

    1.8K30

    【QT】常用控件(一)

    ,这个东西叫做window frame,我们在使用geometry时候x,y是包含这个,要想使用window frame左上角就要用frameGeometry这个函数 通过geometry...() 获取到控件窗口图标,返回QIcon对象 setWindowIcon(const QIcon& icon) 设置控件窗口图标 窗口和任务栏图标都会变成设置成照片 但是我们一般不会通过文件绝对路径引入照片...,因为我们无法保证D盘中图片在你D盘当中也有,我们还有两种办法,一种是相对路径,另一种是使用qrc,相对路径方法就是在该项目的工作目录中建一个新文件夹用来专门存放图片,比如文件夹名字叫做photo...,当我们需要使用时写"..../photo/slm.jpg",但是这样的话还是会因为用户误删而导致照片无法使用,这时对于这种图片一小文件,我们可以使用qrc来直接将图片转化为二进制代码存储在项目当中,这样就永远不会丢失了 右键点击

    9810

    Jekyll 社交图标集合创建

    而且为了能描述不同图标悬停前后位置,必须写很多对样式与之对应,工作量比较大。另外一个比较大困难是,图标集合更新很麻烦。...比如说,虽然我们只在字体图标文件中定义了一个图标,但是当我使用不同 color 定义图标就会改变其颜色。...当然,字体图标在后期维护、更新过程中也会有些问题。比如说,对于一个大型项目的迭代开发,每个子系统可能都会弄一套需要字体图标,然后在代码分支合并就会出现问题。...当我们用 Lighthouse 类似的工具来测试网页性能,就可以很容易地发现请求代码使用率情况。如果我们采用多个字体图标集合并用方案,那么代码实际使用率可能就会很低。...Symbol 图标   实际上除了字体图标不同设备、不同平台上有相同效果之外,SVG 图标也具有类似的效果,这主要是因为 SVG 图标的矢量本质,即缩放不会产生任何失真。

    2K40

    Vue项目中优雅使用icon

    再到后来就出现了font库,也就是字体图标库,它出现给了我们开发很大便利,使用起来也非常方便,字体图标为什么方便,因为我们可以直接从市面上font字体图标库里找图标,直接使用,还可以很好控制一些基础样式...国内估计使用量最大也是最全图标觉得就是阿里矢量图标库(iconfont)了,各种图标简直不要太多,最重要是开源免费 拿iconfont来说,它有三种使用方式,分别是unicode,font-class...支持按字体方式去动态调整图标大小,颜色等等。 但是因为是字体,所以不支持多色。只能使用平台里单色图标,就算项目里有多色图标也会自动去色。...因为使用class来定义图标,所以当要替换图标,只需要修改class里面的unicode引用。 不过因为本质上还是使用字体,所以多色图标还是不支持。...,symbol这中使用方式就是本文正题了,其实之前是一直都使用font-class这种方式(大家估计用这个也很多),但是它有点麻烦,因为每次迭代项目,修改或者添加图标都要去重新下载一份新

    2.2K20

    浅尝iconfont

    正如字面意思,就是图标字体,下面给大家慢慢道来 web页面包含什么元素?...文字 链接 流媒体 视频 音频 图片 背景图(大) 插图(中,例如照片集,课程封面等) 图标(小) 在所有包含ui程序架构中,以上不同ui元素在各种环境中都会遭遇到不同问题,同时也都有与之对应解决方案...使用代码也给到,注意使用名也是可以在站点中自定义: ? 另外注意是,字体文件也是可以内链,在fontello-embedded.css文件里面: ?...可以发现,改变一个图标的颜色,背景色,大小都是非常方便一件事 另一方面,当需要改一个图标的时候,我们可以在制作iconfont时候,替换掉一个图标即可,使用名和字码都是可以定制,这样就可以在不用修改业务使用代码情况下...,只需要替换掉内链字体代码就可以完成替换图标工作 以上代码经过实机测试,兼容IOS4,Android2.3 在移动端,iconfont也可以使用外链形式,这里就不再赘述 3.

    2.4K70

    设计细节提升开发效率与质量

    开发:这里已经完全对齐了, 视觉:看起来还没完全对齐,图也没有切错吧? 开发:字体大小和间距都是按照视觉稿来, 视觉:这里间距偏差这么大,为什么按照视觉稿?...UI 设计中通常以“向右箭头”来表示当前链接可跳转,使用箭头作图当我们把箭头和文字右对齐,箭头其实会更加往外突出,这时候我们会人为往里边推 1 至 2 像素,最后实际给到开发也应该是红框尺寸...“按钮”也是 UI 设计中常用组件,当我们在按钮里使用图标加文字,由于文字体量更大,整体重心会往右偏,所以我们通常会认为让图标和文字整体往左偏移,使整体视觉更加平衡,实际给到开发,也是两个不同边距...8 倍数是因为市场上主流屏幕都能被 8 整除,使用 8 点栅格能够最大程度让我们所设计内容样式在屏幕上保持高清显示,而在日常网页设计中,其实更加倾向使用 4 点栅格系统。...,让我们在日常工作中保持头脑清晰,有条紊,这其实也是在给我们自己节省时间。

    98951

    Android 8.0 “奥利奥”正式发布

    自适应图标 Android 系统上到底改采用异形图标还是规则图标?在这个问题上,不同 OEM 厂商和用户都有自己选择偏好。...依据这一规范开发自适应图标不仅可以最大程度上保留自己特色,同时还能完美地融入到不同启动器和 ROM 整体视觉风格当中。 ?...开启 WLAN 感知功能后,当我们位于已保存 WiFi 连接附近,系统就会自动使用这个 WiFi 接入点。...当我们暂时不便处理某条应用通知,只需要在该条通知上清扫,点击出现时钟图标,即可让这条通知暂时从通知栏消失,在设定好时间后再回来。 ?...8.0 开始完全支持自定义字体,应用可以从字体提供服务方下载使用字体,或在 XML 中定义字形族群 (font families)——声明字体风格、粗细与字体文件。

    1.4K40

    浅尝iconfont

    正如字面意思,就是图标字体,下面给大家慢慢道来 web页面包含什么元素?...文字 链接 流媒体 视频 音频 图片 背景图(大) 插图(中,例如照片集,课程封面等) 图标(小) 在所有包含ui程序架构中,以上不同ui元素在各种环境中都会遭遇到不同问题,同时也都有与之对应解决方案...使用代码也给到,注意使用名也是可以在站点中自定义: ? 另外注意是,字体文件也是可以内链,在fontello-embedded.css文件里面: ?...可以发现,改变一个图标的颜色,背景色,大小都是非常方便一件事 另一方面,当需要改一个图标的时候,我们可以在制作iconfont时候,替换掉一个图标即可,使用名和字码都是可以定制,这样就可以在不用修改业务使用代码情况下...,只需要替换掉内链字体代码就可以完成替换图标工作 以上代码经过实机测试,兼容IOS4,Android2.3 在移动端,iconfont也可以使用外链形式,这里就不再赘述 3.

    1.5K20
    领券