HBuilderXhbuil如何引入iconfont字体

于 2023-02-28 17:33:59 发布
阅读量1.2k 收藏 1
点赞数
文章标签： css 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52611940/article/details/129266111
版权

今天学习uniapp是用到字体图标，来总结一下
1.添加新图标
在这里插入图片描述在这里插入图片描述
2.下载你刚下载的图标解压
在这里插入图片描述
3.打开我们的HBuilderX,在我们的项目里新建一个目录（可命名为font），然后将上图downlode文件打开，把这几个迁移到font文件里面
在这里插入图片描述
4.打开iconfont.css把本地资源替换成在线资源【如下第一个图复制第二图替换】
在这里插入图片描述

在这里插入图片描述
5.在app.vue中添加公共页面css的引入

在这里插入图片描述
6.使用

<view class='iconfont icon-a-11'>12345</view>
m0_52611940
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
hbuilderx使用字体图标
aaa10088的博客
04-13 3858
在hbuilder x中使用 vscode中的老方法，不知道为什么会使用图标失败，要把本地资源替换成在线资源才成功。
如何将iconfont字体图标导入到HBuilderX中
最新发布
Zy030922的博客
06-15 1126
10、 然后打开项目中需应用图标的html文件，使用<span>标签将图标应用于页面。9、 将iconfont.css复制到项目中的css文件夹下，然后单击打开，此时路径是错误的，需要修改，修改结果参考下图。4、 找到自己喜欢的图标，我选择的是第一行第一个，鼠标移到图标上方，点击上方的购物车选项，图标被加入购物车。6、点击资源管理，找到我的项目，可以看到图标已经在项目中了，然后点击下载至本地，下载完成后解压到桌面。5、 点击右上角购物车，选择添加至项目，新建一个项目，创建完成后，点击该项目，然后确认添加。
如何将iconfont字体图标导入到HBuilderX
weixin_69309829的博客
08-26 2811
如何将iconfont字体图标导入到HBuilderX
icontfont图标在Hbuilder中的使用
Dream510JL的博客
09-12 4202
icontfont图标在Hbuilder中的使用 下载后的使用 第一步：下载项目,解压后找到文件夹中的的iconfont.css及其他文件 ; 第二步：将上面用红色边框框起来的文件复制粘贴到Hbuilder中的项目中的css文件中，或新建一个文件夹存放 ； 我在这里是用的新建的文件夹存放 第三步：在页面中引入iconfont.css文件； 第四步：在页面中标签使用的时候，应用...
引入其它字体（CSS字体样式设置中没有的）样式
qq_32580307的博客
07-24 995
1、网上下载对应的字体文件（一般是eot和ttf格式的） 2、将下载的字体文件放入font文件夹并在font文件夹下新建font.css 3、编辑font.css，内容如下 @font-face { font-family: 'fashion'; src: url('fashion.eot?#iefix') format('embedded-opentype'), url('fashi...
01 创建项目和引入文件
weixin_45529137的博客
09-03 365
uniapp项目 图二 图三 注：common.css为全局css样式文件，其内容目前有： 1.2.2 在common目录中创建文件：uni.css。 注：uni.css为uni-app演示站文件，可理解为官方定义好的css默认样式。注：iconfont.css是引入了阿里巴巴字体图标库的文件。这里要注意针对iconfont修改了的内容，完整版代码如下 1.2.4 在static目录中引入文件有：uni.ttf文件 注：此文件是官方图标库文件，不引入会报错（因为引入了uni.css）
如何利用 HBuilderX 制作图文混排的网页
听风者i的博客
08-31 1万+
如何利用 HBuilderX 制作图文混排的网页 实践项目： 1、在D盘创建名为web的基本web项目 2、创建一个空白网页文件，命名为gsjj.html 3、网页文件用于介绍公司的基本情况，要求包含标题，正文和图片。...
HbuilderX引入iconfont踩坑
猛一回头的博客
05-25 2620
在iconfont图库下载好之后，放在自己用 HbuilderX 开发的app项目里，发现不能用，查阅很多资料才知道，要在 iconfont.css 里修改下路径。截图如下： 记录在此，后续忘记可以查看
CSS层叠样式表
ying_0608的博客
09-08 588
CSS层叠样式表 一. 初识CSS 1. CSS的概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表） 2.CSS的作用： 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 二.CSS样式的三种引入方式 1. 行内式（内联样式 ） 1.1
CSS引入外部字体方法，附可用demo
热门推荐
TANKING，开源开发者！
02-24 5万+
有时候我们做的页面需要用到一些更好看的字体 又不想用图片代替，图片会影响加载速度 则使用外部字体来显示 但是直接通过font-family又不一定全部都行 这就需要我们在css中进行定义并且引入字体文件路径 然后再使用外部字体 直接上代码： font.html <!DOCTYPE html> <html> <head> <meta ch...
hbuilderx如何导入样式_HBuilderX使用Vant组件库
weixin_39884738的博客
12-19 2527
HBuilderX使用Vant组件库HBuilderX是一款由国人开发的开发工具，其官网称其为轻如编辑器、强如IDE的合体版本。但是官方的社区中关于Vant组件的安装大多都是针对微信小程序开发安装Vant Weapp，鄙人尝试了各种方法，经历各种错误后终于成功安装vant组件库，在这里分享一下使用HBuilderX进行vue.js开发时安装Vant组件库的经验，使用的版本为2019.08.10更新...
unipp中引入 字体 图标
like245660的博客
08-01 141
1、进入阿里巴巴矢量图库、选择需要用的图标 2、打开库里的下载链接，并找到在线链接，复制在线代码 3、打开 HBuilder在根目录中建立css文件夹，并在其中建立css文件，粘贴在线代码 4、APP.vue中全局引用 ...
如何修改HBuilder中字体大小
qq_36317441的博客
02-13 1万+
点击视图，你就可以看到放大字体和缩小字体的快捷键。
移动app部分机型无法唤起h5支付宝支付_谜之wxs，uni-app如何用它大幅提升性能
weixin_39876739的博客
11-22 309
小程序里有几个谜一样的存在，微信的、支付宝的、百度的。很多开发者都不明白为什么要造这种语言脚本的轮子出来，甚至很多开发者根本不知道它们的存在。其实几大小程序平台创造它们，都是为了解决性能问题，但不得不吐槽下，设计的实在是很难用，文档也语焉不详。uni-app支持将WXS、SJS、Filter编译到这3家小程序平台，同时还在App和H5实现了WXS的解析。为什么做这些事？也是为了性能。uni-ui库...
python程序设计心得体会感想-python实训心得体会
weixin_37988176的博客
11-01 4764
技术文档主体内容：可以认为是页面最想表达的内容总和。对于内容详情页来说，主体内容指从标题开始至正文内容结束，翻页区域也被视为主体内容，文章后的评论、分享、推荐等不视为主体内容。首屏：用户点击搜索结果后进入移动页面，不滑动屏幕即看到的所有内容，称为首屏。一屏：用户滑动屏幕至主体内容展现结束之前，在页面任意位置停留时看到的所有内容，称为一屏。移动端适配：为了使PC页面能够在移动端正常展现的手段，保证用...
引入其他字体库 和 字体样式设置
baifu2766的博客
12-07 225
引入其他字体库， 如Open Sans，先下载Open Sans字体http://pan.baidu.com/s/1c1S8ZC0 @font-face { font-family: 'Open Sans'; /* 为导入的字体命名(自定义)，方便以后使用 */ src: url('font/OpenSans-Light.ttf'); /* 导入...
HBuilder编辑小技巧
mrchengzp的博客
11-11 1万+
/* tips.txt的内容可以在HBuilder启动封面中显示。你可以自定义一个有趣的启动tips，增加[user]开头的文本内容即可。比如[user]我要减肥！ */ 你按照Hello HBuilder的lesson教程敲过一遍吗？如果没有强烈推荐你来一把，立即就能掌握飞一般编码的精髓 Tips不会增加启动时间，只是在无聊的启动中给一点有用的信息 按下Alt键
Hbuilder修改字体
hantanxin的专栏
01-13 7338
工具——>选项——>Hbuilder——>主题——>字体——>修改

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值