Sharepoint 2013 自定义标准 UI 图标

Question

我目前正在为 SP13 构建设计解决方案功能。它部署母版页、布局、css 文件等。

我的问题是：实际上有什么方法可以实现自定义标准 UI 图标吗？例如：对于右上角的功能区或设置图标？

如果我可以通过代码（事件接收器）用自定义的（当然是相同的尺寸）覆盖生成的 themedpng 就完美了。

Answer 1

这里有两种方法，但其中 none 是完美的解决方案。

1- 备份 "C:\Program Files\Common Files\microsoft shared\Web Server Extensions\TEMPLATE\IMAGES\spcommon.png" 并替换为您自己的文件。

不推荐这样做，因为您不应接触 SharePoint 文件。安装 SharePoint 更新时它可能会被覆盖。但这是一个简单的解决方案，有时会在现实世界中使用。

2- 页面打开后，您可以使用 jquery（或 javascript）将所有对“/_layouts/15/images/spcommon.png”的引用替换为您自己的图像加载。您可以在您的站点上部署图像。

问题是开箱即用的图像将首先显示，然后由您的图像替换。所以显示旧图像的时间会很短。

Answer 2

母版页中包含的这个脚本为我做了：

    var CustomIcons = function () {

    var site_url;

    if (_spPageContextInfo.siteServerRelativeUrl === "/") {
        site_url = "";
    } else {
        site_url = _spPageContextInfo.siteServerRelativeUrl;
    }

    var commom_img_url = site_url + '/_layouts/15/images/spcommon-custom.png';
    var commom_img_url2 = site_url + '/_layouts/15/images/spcommon-custom2.png';
    var help_img_url = site_url + '/_layouts/15/images/help.png';
    var settings_img_url = site_url + '/_layouts/15/images/settings.png';

    $('#siteactiontd').find('img:first').attr('src', settings_img_url);
    $('#ms-help').find('img:first').attr('src', help_img_url);
    $('#ctl00_SyncPromotedAction').find('img:first').attr('src', commom_img_url);
    $('#ctl00_fullscreenmodeBtn').find('img:first').attr('src', commom_img_url);
    $('a[_action="edit"]').find('img:first').attr('src', commom_img_url);
    $('a[_action="save"]').find('img:first').attr('src', commom_img_url2);
}

Sharepoint 2013 自定义标准 UI 图标

Sharepoint 2013 custom standard UI icons

sharepoint

sharepoint-2013