文章详情

1:注册账号

点击链接进入阿里iconfont官网,用手机号注册并登录。

2:创建项目

2.1:选择资源管理-我的项目

总裁主题通用教程之主题接入阿里iconfont图标库详细教程

2.2:点击新建项目,填写项目名,其他的默认选择,点击新建即可。

总裁主题通用教程之主题接入阿里iconfont图标库详细教程
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
2.3:到素材库寻找自己需要的图标
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
2.4:也可以直接搜索自己需要的图标,比如wordpress图标
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
2.5:选择自己需要的图标,加入购物车。
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
2.6:选择好后,点击右上角的购物车图标,添加到刚创建的项目中(建议一次性添加多些图标,避免后续更改麻烦)
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
2.7:点击查看在线链接,并点击生成
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
2.8:复制调用地址
总裁主题通用教程之主题接入阿里iconfont图标库详细教程

3:图标接入

3.1:将前面复制的调用地址粘贴到主题的header.php文件

路径:/wp-content/themes/ceomax/header.php

简单修改一下,格式以下图为准

示例:

<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3590567_q0nqodvtac.css" rel="external nofollow" />

 

总裁主题通用教程之主题接入阿里iconfont图标库详细教程

3.1:修改完成后保存文件

4:图标应用

4.1:鼠标放在图标上点击复制代码

总裁主题通用教程之主题接入阿里iconfont图标库详细教程

4.2:将代码粘贴到主题设置相关位置,并保存即可

总裁主题通用教程之主题接入阿里iconfont图标库详细教程

4.3:最终效果

总裁主题通用教程之主题接入阿里iconfont图标库详细教程

注意事项:

1:以上是简单直接的应用方式,如果你需要更改主题内置的一些图标,只需要找到对应的位置将图标代码替换即可,不过这类固定的图标也比较少,一般也不建议更改

2:如果后期添加了新的代码,那么需要在iconfont项目里更新调用地址的链接,同时也需要在主题的header.php文件里更新新的调用地址

3:确认以上全部步骤都正确,但是图标应用后不显示时,大概率是缓存导致的,需要更新所有缓存,如cdn缓存,主题缓存,插件缓存等全部缓存

 

微信扫一扫

支付宝扫一扫

版权:总裁主题 转载请注明出处:https://www.ceotheme.com/12544.html

下一篇:

已经没有下一篇了!

相关推荐
总裁主题通用教程之主题接入阿里iconfont图标库详细教程
1:注册账号 点击链接进入阿里iconfont官网,用手机号注册并登录。 2:创建项目 2.1:选择资源管理-我的项目 2.2:点击新建项目…
1,246
总裁主题通用教程之问答功能与论坛功能激活教程
1:确保问答功能与论坛功能已开启 2:至少创建一个问答分类与论坛分类 3:至少添加一个问题与帖子 至此,问答功能与论坛功能已全部激活完成了 …
2,007
建议学习
总裁主题通用更新教程
1:前往总裁主题在我的订单中点击(订单详情及下载) 2:点击下载主题包和插件到桌面 3:前往服务器管理台,如宝塔面板,备份网站数据库,重要!…
2,909
总裁主题通用教程之关于我们页面常见设置教程
步骤流程: 页面-新建页面-选择单页合集模板-填写内容-创建页面 菜单-新建菜单-选择单页合集菜单-选择前面创建的页面-创建菜单 第一步: …
2,849
总裁主题通用QQ互联(QQ登录)申请教程
以下教程为总裁所有主题通用教程,请仔细操作好每一步,以免审核被拒导致退回浪费时间。 教程开始 1.1:前往QQ互联官网https://con…
2,576
新手必看
总裁主题通用安装教程(超详细,新手也能独立完成)
第一步:安装WordPress系统(已安装过可以忽略) 1.1:进入WordPress官网下载最新版本 1.2:上传WordPress安装包…
8,053
点击联系客服

在线时间:14:00-24:00

服务中心

官方客户服务中心

客服邮箱

110300260@qq.com

扫描二维码

联系官方客服微信

扫描二维码

手机访问本站