最推荐的方法 - 使用 Iconfont PS 插件 (高效、便捷)

这是目前最好用的方法，它相当于为 PS 安装了一个专门的 Iconfont 客户端，你可以在 PS 内直接浏览、搜索、下载并使用 Iconfont 上的所有图标,无需频繁切换浏览器。

第一步：下载并安装插件

1. 下载插件文件：

   • 访问插件的 GitHub 发布页面：https://github.com/sketch-app-icons/iconfont-ps/releases
   • 在页面找到最新版本的发布，下载名为 iconfont-ps.zip 的压缩包。

2. 解压文件：

   • 将下载的 .zip 文件解压，你会得到一个名为 iconfont-panel 的文件夹。

3. 安装插件：

   • macOS: 打开 Finder，按 Command + Shift + G，输入 ~/Library/Application Support/Adobe/CEP/extensions/ 并回车，将 iconfont-panel 文件夹拖拽到这个窗口中。
   • Windows: 打开文件资源管理器，地址栏输入 %APPDATA%\Adobe\CEP\extensions\ 并回车，将 iconfont-panel 文件夹拖拽到这个窗口中。
   • 如果上述文件夹不存在：请手动创建它，路径中的 %APPDATA% 是一个系统变量，指向 C:\Users\你的用户名\AppData\Roaming。

4. 重启 Photoshop：

   
   （图片来源网络，侵删）
   • 非常重要！ 完成安装后，必须完全关闭并重新打开 Photoshop,插件才能被正确加载。

第二步：在 PS 中使用插件

1. 打开插件面板：

   • 重启 PS 后，点击顶部菜单栏的 窗口 -> 扩展功能 -> Iconfont。
   • 一个新的面板会出现在 PS 的右侧，这就是 Iconfont 的控制台。

2. 登录和配置：

   • 面板会提示你登录，使用你的阿里云账号（就是你登录 Iconfont 官网的账号）扫码或账号密码登录。
   • 登录后，插件会自动同步你在 Iconfont 项目库中的所有项目。

3. 选择并使用图标：

   • 在插件面板的左侧，选择你想要使用的 Iconfont 项目。
   • 在中间的搜索框中输入图标关键词（如“用户”、“设置”、“箭头”）来快速找到你需要的图标。
   • 找到图标后，直接用鼠标拖拽到你的画布上。
   • 图标会以智能对象的形式被放置，这意味着你可以双击该图层，在新的编辑窗口里无损地修改图标的颜色和大小,而不会失真。

传统方法 - 复制粘贴 (简单、无需安装)

如果你不想安装插件，或者只需要偶尔使用一两个图标,这个方法也同样有效。

第一步：从 Iconfont 官网获取图标

1. 登录并进入项目：

   • 访问 iconfont.cn,登录你的账号。
   • 进入你已经添加好图标的“项目”。

2. 选择图标并添加至代码库：

   • 浏览并勾选你需要的所有图标。
   • 点击右上角的“添加入代码库”按钮。

3. 下载字体文件：

   • 点击页面右上角的“购物车”图标（代码库）。
   • 在弹出的窗口中，确认选中的图标无误，然后点击“下载”。
   • 在下载选项中，格式建议选择 SVG，因为矢量文件在 PS 中缩放最无损，你也可以选择 TTF 或 OTF 字体文件。

第二步：在 PS 中使用图标

根据你下载的文件类型,操作略有不同：

情况 A：使用 SVG 文件 (最推荐)

1. 打开 SVG：

   • 在 PS 中，点击顶部菜单栏的 文件 -> 打开，然后选择你刚刚下载的 .svg 文件。
   • PS 会弹出一个窗口，让你选择将 SVG 作为“智能对象”、“像素”或“路径”打开。强烈建议选择“智能对象”,这样方便后续编辑。

2. 编辑和放置：

   • 图标会作为一个智能对象图层出现在一个新窗口中。
   • 你可以使用 Ctrl + T (Mac: Cmd + T) 自由变换,调整大小和旋转。
   • 在图层面板中，双击智能对象图层，可以进入其内部编辑,你可以使用魔棒工具或直接在矢量形状上填充颜色来改变图标的颜色。
   • 编辑完成后，保存并关闭这个窗口，回到主画布,你的图标就更新了。

情况 B：使用 TTF / OTF 字体文件

1. 安装字体：

   • 找到你下载的 .ttf 或 .otf 文件，右键选择“安装”,系统会自动将字体安装到你的字体库中。

2. 使用文字工具：

   • 在 PS 中选择“文字工具”。
   • 在顶部选项栏中，将字体切换为你刚刚安装的 Iconfont 字体。
   • 在画布上点击，然后输入图标的代码（），这个代码可以在 Iconfont 项目页面的“Font Class”选项卡中找到每个图标对应的代码。
   • 输入代码后，按回车,图标就会以文字的形式出现。
   • 你可以像编辑普通文字一样,改变其颜色和大小。

总结与对比

如果你经常需要在 PS 中使用图标，花几分钟安装 Iconfont PS 插件绝对是物超所值的，它能极大地提升你的工作效率和设计体验。