hbuilderx使用字体图标 3个易出错点

已于 2022-04-21 11:48:44 修改
阅读量858 收藏
点赞数
文章标签： 前端
于 2022-04-13 21:20:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaa10088/article/details/124158218
版权

 一全局引用iconfont.css文件

 在uni.css文件中打入   @import '/font/iconfont.css';

 二把iconfont.css中的本地资源改成在线资源

 1）复制如下图这段代码（在线地址）

 

 2)打开 iconfont.css，把第一段 文字 删除  ，替换成刚刚复制的那段，即把本地资源替换成在线资源 

  替换后如图

三.创建页面的时候一定要选  scss模板  

可能是因为  在uni.scss里面进行的全局配置，使以也要使用scss模板进行页面编辑

 

 

最后正常使用字体图标

不打代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app引入自定义图标后报错
Shiny_boy_的博客
01-25 2527
uni-app引入自定义图标后报错 按照uni-app官网https://uniapp.dcloud.io/component/uniui/uni-icons引入自定义图标后，报错信息如下： 18:23:01.393 Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 18:23:01.395 ModuleNotFoundError: Module not found: Error: Can't
Hbuilder真机运行/打包后iconfont无法显示解决办法
ljw_jiawei的博客
05-14 3480
在cdn前面加上 https: 即可 如<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1145523_9uc3n9wl4rk.css"/>
如何将iconfont字体图标导入到HBuilderX
weixin_69309829的博客
08-26 2840
如何将iconfont字体图标导入到HBuilderX
icontfont图标在Hbuilder中的使用
Dream510JL的博客
09-12 4230
icontfont图标在Hbuilder中的使用 下载后的使用 第一步：下载项目,解压后找到文件夹中的的iconfont.css及其他文件 ; 第二步：将上面用红色边框框起来的文件复制粘贴到Hbuilder中的项目中的css文件中，或新建一个文件夹存放 ； 我在这里是用的新建的文件夹存放 第三步：在页面中引入iconfont.css文件； 第四步：在页面中标签使用的时候，应用...
如何安装使用HBuilderX软件。
04-10
HBuilderx是一个前端开发常用的软件，本压缩包含有HBuilderX.3.1.9.20210413.full.dmg、HBuilderX.3.1.9.20210413.full.zip、2345好压.exe和Chrome_69.0.3497.100_x64.exe等软件，视频教程：...
从小白到入门的 HBuilderX 使用指南
最新发布
03-18
作为一款面向新手的入门指南，我们将深入探讨HBuilderX的基础操作、核心功能和实用技巧，帮助你快速从零基础晋升为熟练使用者。 1. **安装与启动** - 下载：首先，你需要从DCloud官网下载最新版本的HBuilderX...
HBuilderX.3.7.9.20230324 安装包，附安装使用教程
05-09
HBuilderX.3.7.9.20230324 安装包，附安装使用教程 HBuilderX是HBuilder的升级版。它是是DCloud（数字天堂）推出为前端开发者服务的通用IDE，或者称为编辑器。 BuilderX标准版可直接用于web开发、markdown、字处理...
通过Hbuilder X创建uni-app项目并引入UView
08-18
首先，我们需要安装Hbuilder X，这是一个强大的多端开发工具，集成了代码编辑、预览、打包等功能。下载并安装完成后，打开Hbuilder X，点击左侧菜单栏的“创建”按钮，选择“uni-app项目”，输入项目名称和选择存储...
HBuilderX.3.6.5.20221121.zip
11-25
3. **项目管理与协作**：HBuilderX具有完善的项目管理功能，可以方便地管理多个项目，支持Git等版本控制工具，使得团队协作更为流畅。此外，它还集成了阿里云上传、下载服务，方便开发者进行代码的云端存储和同步。 ...
HBuilderXhbuil如何引入iconfont字体
m0_52611940的博客
02-28 1266
HBuilderXhbuil如何引入iconfont字体
HbuilderX引入iconfont踩坑之路
weixin_43933701的博客
11-22 2938
文章目录iconfont.css样式优势获取图标的代码格式其他 iconfont.css样式优势 将图标转化为css代码，而非图片格式，可减少页面资源加载； 使用时直接使用class属性即可引入图标，方便简单； 避免图标变形失真等，可改变图标颜色； 获取图标的代码格式 以常用图标网站 阿里巴巴矢量图标库 为例： 搜索图标并下载 在图表库中选择下载代码 将除demo外的文件放入项目目录static中 为使用方便，将iconfont.css文件直接放入第一层目录下 修改iconfont.css中引
Hbuilder引用css文件无效
linxuanasd的博客
03-29 4576
这个bug真的是，没想到，最近下载了hbuilder想跟着视频，写个前端的项目，之前的项目写后端比较多，体现不出前端，毕竟要面试前端实习，就打算写个前端的，没想到刚刚开始就遇到了问题。我找的视频教程是19年录制的，然后现在有的样式并不支持了，啊啊啊啊，没想到，我换了现在的写法，就显示出来样式了。 还试了很多别的方法，@import，或者改charset="utf-8" 改好的css /* 公共样式 */ .container{ width: 1206px; height: 3...
Hbuilder缩进
lyna的博客
11-26 9873
1.全文缩进： tab:向后缩进； ctrl+tab：向前缩进 2.字符缩进： 导航栏：工具→选项
hbuilderx使用字体图标
aaa10088的博客
04-13 3867
在hbuilder x中使用 vscode中的老方法，不知道为什么会使用图标失败，要把本地资源替换成在线资源才成功。
解决iconfont 图标不显示问题
热门推荐
ppx_mqj的博客
09-05 4万+
刚开始用icon font图标库不是很熟悉，踩了一些坑，希望分享出来能给新手们带来一些帮助 从官网上下载图标至本地后，放到项目里面要注意一下两点： 1、路径问题 找到iconfont.css这个文件并打开它，你会看到它里面的路径是这样的 报错了，原因是我在项目里面存放路径是这样的 所以这个时候你只需要将路径改成你项目结构中的路径即可，修改后： 2、路径配置好后怎样把你下载的图标引入到代码中 ...
关于使用微软拼音在Hbuilder打不出顿号、的问题
weixin_43605386的博客
03-02 3279
顿号，builder，微软拼音
无法输入中文标点符号问题解决方案【亲测有效】
天天放羊的博客
04-08 1万+
问题描述：无论在中文状态还是在英文状态下，输入的标点符都是英文标点 这种问题再搜狗输入法下比较常见，在中文输入状态下它支持中英文标点符号切换。 解决方法:   按下组合键Ctrl+. 即可 扩展： 搜狗拼音输入法 中英文标点切换 ： Ctrl+. 全角半角切换：Shift+Space 简繁体切换：Ctrl+Shift+F over !!! ...
hbuilderx使用vue写一个页面使用组件
06-11
好的，下面是一个简单的示例，演示如何在HbuilderX中使用Vue.js编写一个页面并使用组件： 1. 首先，创建一个Vue.js应用程序。可以使用HbuilderX的脚手架来快速创建一个Vue.js应用程序。在HbuilderX中，选择“文件”->“新建”->“项目”，然后选择“Vue.js”模板，按照提示创建一个新的Vue.js项目。 2. 创建一个Vue.js组件。在HbuilderX中，选择“文件”->“新建”->“Vue.js组件”，然后输入组件名称和文件路径。在组件中编写HTML、CSS和JavaScript代码，以定义组件的外观和行为。 3. 在主页面中使用组件。在Vue.js应用程序的主页面中，可以使用Vue.js的组件化概念来使用组件。首先，在主页面的Vue实例中引入组件，然后在页面中使用组件标签来添加组件。例如，如果创建了一个名为“hello-world”的组件，可以在主页面的Vue实例中引入该组件，然后在页面中使用“<hello-world></hello-world>”标签来添加组件。 下面是一个示例代码，演示如何在HbuilderX中使用Vue.js编写一个页面并使用组件： ``` <!-- index.html --> <template> <div> <h1>Hello, World!</h1> <<my-component></my-component>> </div> </template> <script> import MyComponent from './components/MyComponent.vue' export default { name: 'App', components: { 'my-component': MyComponent } } </script> ``` ``` <!-- MyComponent.vue --> <template> <div> <h2>This is my component!</h2> <p>{{ message }}</p> </div> </template> <script> export default { name: 'MyComponent', data () { return { message: 'Hello from my component!' } } } </script> ``` 在上面的示例中，我们创建了一个名为“MyComponent”的组件，并在主页面中使用。组件中渲染了一个标题和一段文本，而主页面则渲染了一个标题、一个文本和该组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值