iconfont 使用

Unicode 每个字都有一个unicode。一个字体图标也是一个字，也有一个unicode。

<span class="iconfont">&#x33;</span>

uniapp 小程序引入iconfont使用步骤

• 网站iconfont添加要使用的字体图标到项目。下载字体图标文件到本地。

• 拷贝 iconfont.ttf、iconfont.css 文件到static文件夹

    // iconfont.css
    // 定义字体
    @font-face {
      font-family: "iconfont"; /* Project id 4030644 */
      /* src: url('iconfont.ttf?t=1682065712258') format('truetype'); */
      src: url('@/static/iconfont.ttf') format('truetype');
    }
    // 引用字体
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  
    .icon-mima:before {
      content: "\e62a";
    }
  
    .icon-fl-renyuan:before {
      content: "\e625";
    }
  
    .icon-qiye:before {
      content: "\e646";
    }
  

  • vue文件引入iconfont.css。<text class="iconfont icon-qiye"></text> 具体使用

    <template>
        <view class="login">
            <view class="con">
                <view class="company">
                    <!-- 添加类名 iconfont icon-qiye 使用字体图标 -->
                    <text class="iconfont icon-qiye"></text>
                    <input class="uni-input" placeholder-style="color:#6C6C6C" placeholder="请输入企业编号" focus="true" adjust-position="true" type="text">
                </view>
                <view >
                    <text class="iconfont icon-fl-renyuan"></text>
                    <input class="uni-input" placeholder-style="color:#6C6C6C" placeholder="请输入账号" focus="true" adjust-position="true" type="text">
                </view>
                <view>
                    <text class="iconfont icon-mima"></text>
                    <input class="uni-input" placeholder-style="color:#6C6C6C" placeholder="请输入密码" focus="true" adjust-position="true" type="text">
                </view>
            </view>
        </view>
    </template>

    <script>
        export default {
            data() {
            },
            methods: {
            }
        }
    </script>

    <style lang="scss">
    // 引入 iconfont.css文件
    @import "@/static/iconfont.css";
    </style>