搜索引擎优化(SEO)

搞懂SEO,让您的网站订单接不完!

电话/微信:18221559551
首页 > 知识&问答

ufcc在线链接具体怎么设置?

发布时间:2024-10-23 15:29:31 / 浏览量:

ufcc在线链接具体怎么设置

首先本文章向大家介绍ufcc在线链接怎么使用?主要包括ufcc在线链接常用的使用实例和应用技巧、还有就是基本知识点、还有末尾的总结和日常需要注意事项,需要的朋友可以参考一下,希望可以帮助到您。

前言:主要介绍不同项目使用ufcc在线链接的方式

具体操作:首先!先在ufcc中新建一个项目,存放项目中所需的icon。

进入ufcc官网http://ufcc.com/

登录后点击新建项目,然后填入信息

创建成功后项目会出现在左侧列表中,点击项目名称,进入项目后,可进行上传图标

关于各项目不同的实现请参考如下3点建议

第1点:vue+element-ui

复制ufcc项目的symbol链接,在html.index中引入ufcc在线链接

<linkrel="stylesheet"type="text/css"href="ufcc在线链接地址"/>

项目用法

<p></p>

class中的ufcc是新建项目的时候配置的fontfamily,默认为ufcc。iconequal为icon的fontclass码

第2点:vue + antd-vue-pro

antd-vue-pro配置文件defaultSettings中配置 ufccUrl

首先获取ufcc在线链接,注意这里使用symbol在线链接

新建icon.js文件

/**

* Custom icon list

* All icons are loaded here for easy management

* @see https://vue.ant.design/components/icon/#Custom-Font-Icon

*

* 自定义图标加载表

*/

import { Icon } from 'ant-design-vue'

import defaultSettings from '@/config/defaultSettings'

export const ufcc= Icon.createFromufccCN({

scriptUrl: defaultSettings.ufccUrl, // generated by ufcc.cn

})

// main.js 中注册组件

import { ufcc} from './core/icons'

Vue.component('icon-font', ufcc)

// 业务代码中使用

<icon-font type="iconequal" />

第3点:react + antd

// common.js

// 自定义ufcc

export const ufcc= createFromufccCN({

scriptUrl: '//at.alicdn.com/t/xxx', //ufcc在线链接

})

// 业务代码中xxx.tsx

import { ufcc} from '@constants/common'

<ufcctype="iconequal" />

以上就是小编给大家介绍的,希望可以帮助到大家,非常感谢大家在百忙之中来阅读,谢谢大家。

请问还有什么能够帮到你吗?

如果还有需要我们帮助你的地方请联系我们哦!

联系我们