在 WordPress 和 Elementor 上的手风琴标题前添加 SVG 图标

Question

我想知道如何在 Elementor/WordPress 的手风琴标题前添加 SVG 图标。每个标题的不同 SVG 图标。我相信这可以用 CSS 来完成。我研究了整个互联网，但找不到任何东西。请参考附图作为示例和本页的手风琴：https://library.elementor.com/handmade-kids-shop/help-info/

您的帮助将不胜感激。非常感谢！

Answer 1

您真的不需要自定义 CSS，因为 Elementor 已经支持将图标添加到 Toggle Widget 标题，如 explained here.

如果您的媒体库中尚不支持 SVG 文件，那么您可以添加插件 或在您的

functions.php

中使用以下代码片段：

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );