Dấu đầu dòng màu tròn cho các mục trong danh sách sử dụng Font Awesome

Thủ thuật WordPress
#1

Mặc dù có thể thiết lập dấu đầu dòng màu cho các mục danh sách không có thứ tự bằng cách sử dụng phương pháp này, nhưng trong hướng dẫn này, tôi chỉ ra cách chúng ta có thể sử dụng các biểu tượng Font Awesome cho giống nhau.

Đầu tiên, hãy tải Font Awesome trong WordPress bằng cách thêm

// Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
}

trong functions.php .

Sau đó chúng tôi sẽ thiết lập

    1. list-style-type cho danh sách các mục để none
  2. font-family cho đến FontAwesomeul > li:before

và content đến unicode của biểu tượng fa-circle với color giá trị mong muốn của chúng tôi.

Đây là CSS mẫu từ Minimum Pro:

.entry-content ol,
.entry-content p,
.entry-content ul,
.quote-caption {
	margin-bottom: 26px;
}

.entry-content ol/*,
.entry-content ul*/ {
	margin-left: 54px;
}

.entry-content ul {
	margin-left: 40px;
	padding-left: 20px;
}

.entry-content ol > li {
	list-style-type: decimal;
	padding-left: 10px;
	margin-bottom: 10px;
}

.entry-content ul > li {
	/*list-style-type: disc;*/
	list-style-type: none;
	margin-bottom: 10px;
}

.entry-content ul > li:before {
	content: "\f111";
	font-family: FontAwesome;
	font-size: 8px;
	color: #eb871e;
	vertical-align: middle;
	margin-left: -28px;
	margin-right: 20px;
}

.entry-content ol ol,
.entry-content ul ul {
	margin-bottom: 0;
}