在uni-app使用iconfont中的图标
uni-app 如何使用iconfont中的图标
在uni-app中使用Iconfont图标通常涉及以下几个步骤：
步骤一：获取Iconfont资源
-
访问 iconfont-阿里巴巴矢量图标库，注册并登录账号。
-
浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。
-
完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件：
iconfont.css或iconfont.min.css：包含字体文件的引用及样式声明。iconfont.eot、iconfont.ttf、iconfont.woff、iconfont.woff2等字体文件。demo_index.html：示例文件，展示如何在HTML中使用这些图标。
步骤二：整合Iconfont资源到uni-app项目
-
将字体文件放入项目：
-
将下载的字体文件（
.eot、.ttf、.woff、.woff2）放入uni-app项目的static目录下，例如创建一个子目录fonts存放它们，以便统一管理。
-
-
引入Iconfont样式：
-
将
iconfont.css或iconfont.min.css文件复制到项目的static目录或uni.scss所在的样式目录（如/common）。 -
在
main.js或全局样式文件（如uni.scss）中通过@import语句引入Iconfont样式。例如，如果将iconfont.css放在static目录下，则引入语句如下：@import "~@/static/iconfont.css";
-
步骤三：在Vue页面或组件中使用Iconfont图标
使用Unicode编码：
-
查看下载包中的
demo_index.html或直接在Iconfont网站上查看每个图标的Unicode编码。 -
在Vue模板中，使用
<text>标签结合v-for循环（如果有多图标）或直接插入Unicode编码来显示图标：<template> <view> <!-- 单个图标 --> <text class="iconfont">图标Unicode编码</text> <!-- 循环显示多个图标 --> <view v-for="(icon, index) in iconsList" :key="index"> <text class="iconfont">{{ icon.unicode }}</text> </view> </view> </template> -
确保在CSS中为
.iconfont类设置合适的字体家族，通常在iconfont.css中已经定义好，如：.iconfont { font-family: "iconfont" !important; /* 可以添加其他样式如颜色、大小等 */ }
使用类名：
-
如果
iconfont.css中为每个图标定义了特定的类名（如.icon-name:before），则可以直接在Vue模板中使用这些类名：<template> <view> <i class="iconfont icon-name"></i> </view> </template>
注意事项：
-
确保引入的样式文件路径正确，如果使用绝对路径（如
~@/static/...），确保构建工具能够正确解析。 -
如果项目中同时使用多种字体图标，需注意图标库间的样式隔离，避免相互影响。
-
对于小程序端，由于其限制，可能需要额外配置或使用特定的插件来支持Iconfont字体图标。
通过上述步骤，您可以在uni-app项目中顺利地使用从Iconfont获取的图标。
根据实际项目需求和Iconfont提供的CSS样式，选择合适的使用方式（Unicode编码或类名）将图标融入到您的界面设计中。
uni-app 如何使用iconfont中的多色图标？
在uni-app中使用Iconfont中的多色图标，需要遵循不同的引入和使用流程，因为多色图标通常不是通过传统的Web字体（TTF、WOFF等）实现，而是利用SVG Sprite技术。以下是具体步骤：
步骤一：获取多色图标资源
-
访问阿里巴巴Iconfont网站，确保已登录账号。
-
选择或搜索所需的多色图标，将其添加至项目或购物车。
-
进入“我的项目”，找到包含多色图标的项目，点击“下载”按钮，选择“Symbol引用”或“SVG Sprite”格式下载。下载得到的文件通常包括：
-
symbol/iconfont.svg：SVG Symbol Sprite文件。 -
symbol/iconfont.js：用于动态加载SVG Sprite的JavaScript文件（可选，视项目需求而定）。 -
demo_index.html：示例文件，展示如何在HTML中使用这些多色图标。
-
步骤二：整合多色图标资源到uni-app项目
-
将SVG Sprite文件放入项目：
-
将
iconfont.svg文件放入uni-app项目的static目录下，例如创建一个子目录svg存放它。
-
-
（可选）引入动态加载脚本：
-
如果下载包中包含了
iconfont.js，将其放入项目合适的位置（如static/js目录），并在需要使用多色图标的页面的index.html或全局模板中通过<script>标签引入。例如：<script src="/static/js/iconfont.js"></script>
-
步骤三：在Vue页面或组件中使用多色图标
直接引用SVG Symbol：
-
在Vue模板中，使用
<svg>标签结合use元素来引用SVG Sprite中的多色图标：<template> <view> <svg> <use xlink:href="#图标ID"></use> </svg> </view> </template> -
其中，“图标ID”是SVG Symbol中的唯一标识符，可以通过查看
iconfont.svg文件或示例demo_index.html来获取。
（可选）使用动态加载脚本：
-
如果引入了
iconfont.js，按照其文档或示例中的用法，在Vue组件中调用相应的函数来加载和插入多色图标。通常会提供类似Iconfont.init()的方法，使用时可能需要传入SVG Sprite的URL或其他配置项。
注意事项：
-
多色图标依赖于浏览器对SVG和SVG Sprite的支持，大多数现代浏览器都支持这些特性。
-
在uni-app的小程序端，需要确保目标平台（如微信小程序、支付宝小程序等）支持SVG的使用。部分平台可能需要额外配置或使用插件来支持SVG。
-
如果使用直接引用SVG Symbol的方式，确保
xlink:href属性中的URL相对于页面的根路径正确。如果图标加载不成功，检查路径是否正确以及服务器是否正确返回SVG文件。
通过以上步骤，您可以在uni-app项目中成功地使用从Iconfont获取的多色图标。
根据项目需求和平台兼容性，选择合适的引入和使用方式（直接引用SVG Symbol或使用动态加载脚本）来展示多色图标。
uni-app 中如何使用uni-icons引用iconfont图标
uni-icons 图标
组件名：uni-icons（已支持 uni-app x） 基本用法
<uni-icons type="contact" size="30"></uni-icons>Icons Props
| 属性名 | 类型 | 默认值 | 说明 |
| size | Number | 24 | 图标大小 |
| type | String | - | 图标图案，参考示例 |
| color | String | - | 图标颜色 |
customPrefix[即将废弃] | String | - | 自定义图标 |
| fontFamily | String | - | 自定义图标 2.0.0+支持 |
通过 fontFamily 自定义图标
-
引入字体图标
-
页面 style 中定义 font-family 属性，并正确引入字体
@font-face {
font-family: CustomFont;
src: url('./iconfont.ttf');
}-
组件声明 fontFamily 属性，值为 步骤2 的 font-family ,此时组件的 type 属性将不生效
-
组件内需要使用字体的 unicode 码作为图标显示内容
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>-
方便使用扩展，推荐将 unicode 与显示内容做一个map映射
<template>
<view class="icon-content">
<view v-for="(item,index) in customIcons" :key="index">
<uni-icons fontFamily="CustomFont" >{{item.unicode}}</uni-icons>
<text>{{item.name}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
icons: [],
customIcons: [
{
name: "home",
unicode: "\ue601",
},
{
name: "my",
unicode: "\ue6ba",
},
{
name: "back",
unicode: "\ue634",
}
]
}
},
created() {},
}
</script>
<style>
@font-face {
font-family: CustomFont;
src: url('./iconfont.ttf');
}
</style>原文地址：https://blog.csdn.net/qq_44848480/article/details/137765304
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！