如何通过引入项目的方式使用 icon 矢量图标

时间：2024-03-01 15:15:30

前言

icon 可以直接下载图片格式然后使用，这也是最简单的方式，但是小程序中的项目大小有限制的，所以这些图标图片再占用空间的话或许就显得不太合适了，这里就记录一种把 icon 的样式引入项目中的使用方法。

一、添加图标到项目（矢量库项目）

1、进入 icon 矢量库添加自己想要使用的图标到购物车（可多个一起添加）

点击到 icon 矢量库网站
网址：https://www.iconfont.cn/

2、点击购物车选择添加至项目，然后确定

二、拷贝代码到本地

1、进入我的项目，点击生成代码

2、复制相应的代码

访问连接后复制代码

3、粘贴到本地小程序项目中

所有代码：

@font-face {font-family: "iconfont";
  src: url(\'//at.alicdn.com/t/font_1966194_76rbfn21qf5.eot?t=1595646068052\'); /* IE9 */
  src: url(\'//at.alicdn.com/t/font_1966194_76rbfn21qf5.eot?t=1595646068052#iefix\') format(\'embedded-opentype\'), /* IE6-IE8 */
  url(\'data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAAB9AAAAOYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqDKIMIATYCJAMMCwgABCAFhG0HRxvfBlGUDUqe7GuMjaHVkzZCYlbNQksLgpAqAAunvDh+/XxCd0Qn3j69XEgSwTJgCfHwNfa/c3f3m0hiiKZRVKNZIkH7Q4iUoMlDYejiicqbuvmDX/BbQ+SzBMayX1yUcUTZX1Y41sqcA/qN6kGjvCJUaIcdUJeuOyQgL/HEuHyqA26SkpTo9vP13UJaXAmPkvb328TkOpXI0bJotkld/iwidauL1uqTUJDSRt4pZTfDDSClP+6dNqbYfG3LaazFc/unLsA4oEDH3hpoURaQN4xdeRHTCdQbFoAbDren4iiMeoG4mCW+4qTMSk12qBWqS7oW8USV2vQofaR47H8+flqEQ1KVGU23nt5HyurL+DiyCgddFMl4TrBeZCwCCnG41L2XHoYWYfWK2qhPrlaENJa3cuCLVW31Sv94iahmZDaCWRhOfJm0+QRfvoQlnP+3VKMe9/FmhNcjq9lIX119XVt9R13dsce2m/c9uO6C5bADXKLkAZFU/1vq00WWfpHvf48DXzh9YixdMZHzSOTnHKdmMFDPI1bplX/C9eE+r/foOzA7k3vsPlP5MUX5GzyI+cD7XlvHVeJ5HlLWYRgBxQACR+7pGNdgtHwyjT448njqui1q9172QiD6Ywnigkv7h9jk1VN/yGWixG3roGEPEbrBDah47datNmI1OeNLNkLMxs5oxFYuX4D67Lb5Tc/axSBwWc/EVRAIPmEudi/OoZP+v/LsYzD1VinarTU3vub6f739/bv9NiKoak92YtLO3gpCXiFUEPfsn5eNT0j+urLXvRFDMjlVz3BtaxQAUDmXV/y83zj6fHjdlhX/atEFfF77uvVrVBT5HmpvzRP8KknLvKLqYE2RxbZYj2Y72C9CCIVc4wflQru9v7ardSahVlcMSY0hyGpNogt+Eao0WA7Vaq2Geguy3g06SLoodZg3AQitZkiavYSs1YIu+A2qdPuhWmvoUG93dAzZYDqy/npGXzCC4g99SHVs2aQfZN8x6UqfkzKf8kZuMy+kk1k2esQaeYwW6pMstMTQMFXAwGxYlgScKcdQJp1Is4yncdmFJiVVSt96DPkEioDCH+iFSC12i4t+7v13KNEp+bgGURF8Q6yVlQ9SkaQF+qiuWyGuZRflI7GgiRhoMFIBDDhRaYYI4OWVcigkJroegcZSjAo1bdWT+bXV8y2BesaZcqTIUXRc+6VRk22pCrIao0fqN2ivDUPqalEU\') format(\'woff2\'),
  url(\'//at.alicdn.com/t/font_1966194_76rbfn21qf5.woff?t=1595646068052\') format(\'woff\'),
  url(\'//at.alicdn.com/t/font_1966194_76rbfn21qf5.ttf?t=1595646068052\') format(\'truetype\'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url(\'//at.alicdn.com/t/font_1966194_76rbfn21qf5.svg?t=1595646068052#iconfont\') format(\'svg\'); /* iOS 4.1- */
}

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

.icon-xxhdpiCombinedShape:before {
  content: "\e624";
}

.icon-Account:before {
  content: "\e6e6";
}

三、使用 icon

1、新建 text 标签来接收 icon 图标,并填写相应的 class 即可

<view>
  <text class="lk-font icon-xxhdpiCombinedShape"></text>
</view>

2、效果图

总结

方法有很多，这种稍微复杂了些，但是也是一种方法，在此记录，以备不时之需。