flatsome关注图标设置-社交媒体第三方图标添加

flatsome关注图标设置-社交媒体第三方图标添加-大可建站

准备好更改您的关注链接了吗?在本指南中,我们将向您展示一些简单的示例,说明如何调整和个性化关注链接。过滤器允许您添加、删除、重新排序和自定义图标。

新的关注链接

/**
 * Load font-awesome icons.
 */
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css', false, '6.2.1' );
} );

/**
 * Register new custom spotify follow link.
 */
add_action( 'init', function () {
	flatsome_register_follow_link( 'spotify', 'Spotify', array(
		'icon'     => '<i class="fa-brands fa-spotify"></i>',
		'priority' => 5,
	) );
} );

style.css添加

/* Give the new spotify follow link a color */
.button.spotify:hover, .button.spotify:not(.is-outline) {
    color: #1dd05c!important; /* green */
}

更改优先级(顺序)

/**
 * Change priority (order).
 */
add_filter( 'flatsome_follow_links', function ( $links, $args ) {
	$links['instagram']['priority'] = 10;
	$links['facebook']['priority']  = 20;

	return $links;
}, 10, 2 );

更改图标

/**
 * Load font-awesome icons.
 */
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css', false, '6.2.1' );
} );

/**
 * Change icons.
 */
add_filter( 'flatsome_follow_links', function ( $links, $args ) {
	$links['instagram']['icon'] = '<i class="fa-brands fa-instagram"></i>';
	$links['twitter']['icon']   = '<i class="fa-brands fa-square-twitter"></i>';
	$links['facebook']['icon']  = '<i class="fa-brands fa-square-facebook"></i>';
	$links['email']['icon']     = '<i class="fa-solid fa-square-envelope"></i>';
	$links['pinterest']['icon'] = '<i class="fa-brands fa-square-pinterest"></i>';

	return $links;
}, 10, 2 );

禁用工具提示

/**
 * Disable tooltips on all follow links example.
 */
add_filter( 'flatsome_follow_links', function ( $links, $args ) {
	foreach ( $links as $key => $link ) {
		// Remove title attribute for native tooltip.
		if ( ! empty( $link['atts']['title'] ) ) {
			$links[ $key ]['atts']['title'] = null;
		}

		// Additionally remove tooltip class (optional).
		if ( empty( $link['atts']['class'] ) ) continue;
		$links[ $key ]['atts']['class'] = implode( ' ', array_diff( explode( ' ', $link['atts']['class'] ), array( 'tooltip' ) ) );
	}

	return $links;
}, 10, 2 );