关于#uniapp icon#的问题，如何解决？

一开始我按照https://www.jianshu.com/p/7fc08b1b4d85 的教程，
vue：

<template>
    <view class="body">
        <input class="input iconfont icon-search" type="text" placeholder="请输入商品名称"  @click="search" disabled placeholder-class=" grey" />
    </view>
</template>

<script>
    export default{
        data() {
            return {
                
            }
        },
        methods:{
            search(e){
                console.log("空反馈")
            }
        }
    }
</script>

<style lang="scss">
    .body{
        height: 100%;
    }
    .input{
        // 添加圆角
        border-radius: 25px;
        // 框框颜色
        background-color: yellowgreen;
        // 文字居中
        text-align: center;
        // 框框居中
        margin: auto;
        width: 80%;
        height: 40px;
    }
    
@import "../../iconfont.css";
</style>

iconfont.css

@font-face {
  font-family: 'iconfont';  /* Project id 4039333 */
  src: url('https://at.alicdn.com/t/c/font_4039333_bmbb8xq7sar.woff2?t=1682481363994') format('woff2'),
       url('https://at.alicdn.com/t/c/font_4039333_bmbb8xq7sar.woff?t=1682481363994') format('woff'),
       url('https://at.alicdn.com/t/c/font_4039333_bmbb8xq7sar.ttf?t=1682481363994') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 14px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
  content: "\e65c";
}

.icon-shouye:before {
  content: "\e8b9";
}

.icon-wode:before {
  content: "\e8bb";
}

.icon-zhibo:before {
  content: "\e8c1";
}

.icon-wode1:before {
  content: "\e8c6";
}

.icon-shouye1:before {
  content: "\e8c7";
}

.icon-zhibo-copy:before {
  content: "\e8c8";
}

模拟后成了这样

百度了其他方法也无法让这俩在同一行。

然后我又仿照https://www.jianshu.com/p/a9cc859d8c71 （该文也是引用上面链接的）方法

只修改了这部分

<template>
    <view class="body">
        <input class="input" type="text" :placeholder="icon"  @click="search" disabled placeholder-class=" grey" />
    </view>
</template>

<script>
    export default{
        data() {
            return {
                icon: '\ue65c请输入商品名称'
            }
        },
        methods:{
            search(e){
                console.log("空反馈")
            }
        }
    }
</script>

最后却成了这样

我也不知道错在哪了，怎么搜索都改不了，不知道问题出在哪。

破案了，实机演示时是有的，只有模拟时没有

你没写 class= "iconfont"

• 这篇博客: uniapp或者vue引入在线和离线阿里巴巴iconfont字体图标库中的 font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 注：1和2都是黑白色引入，3彩色引入