uni-app iconfont 字体图标的引入

怼烎@ 2023-06-23 13:21 107阅读 0赞

https://www.jianshu.com/p/c2b100636006

uni-app iconfont的引入

在vue页面中，如何引用iconfont字体库？
首先登陆

  1. https://www.iconfont.cn #注册并创建自己的项目

format_png

image.png

创建后，搜索自己需要的图标，加入到购物车
例如：设置

format_png 1

image.png

添加到项目

format_png 2

image.png

在我的项目中，生成在线链接

format_png 3

image.png

到此，素材已经准备好了。

在项目中引入
生成 iconfont.css，并加入一下代码

  1. @font-face {
  2.     font-family: 'iconfont';
  3.     src: url('//at.alicdn.com/t/font_1198534_o4wefru3dk.ttf') format('truetype');
  4. }
  6. .custom-font {  #自定义字体名称
  7.     font-family: iconfont;
  8.     margin-left: auto;
  9. }

在vue页面引入iconfont.css （可以不用引入也可以渲染字体图标）

  1. @import './common/iconfont.css';

使用

  1. <!--找到图标代码填入即可-->
  2. <view class='custom-font'></view>

发表评论

表情：
评论列表 （有 0 条评论，107人围观）

还没有评论，来说两句吧...

相关阅读

    相关 如何引入iconfont的字体图标

    首先在[阿里巴巴矢量字体图标库。][Link 1] 把你想要的图标加入购物车。然后点击进入购物车的界面。看到有个下载代码。然后我们就会得到一个文件夹。我们把文件夹里的css。

    水深无声水深无声/ 0 赞/ 376 阅读