Làm thế nào để căn giữa (text-align) icon fontello?

hell6w9rld · January 16, 2018, 3:22am

Hello.
Mình tạo 2 cái nút để chuyển trang (pagination) cho bài viết ở trang chủ như sau
html

				<div class="pagination">
					<a href="#">Next</a>
					<a href="#">Previous</a>
				</div>

css

.pagination {
	font-size: 14px;
	display: flex;
	justify-content: space-between;
}

.pagination a {
	background-color: #605ca8;
	color: #fff;
	padding: 2px 0px 2px 0px;
	border-radius: 3px;
	transition: 0.5s;
	width: 80px;
	text-align: center;

}

.pagination a:hover {
	background-color: #403e77;
}

kết quả:

nhưng giờ mình muốn cho thêm icon vào 2 nút kia, mình sử dụng icon fontello

<i class="icon-left-open"></i> 
<i class="icon-right-open"></i>

được như thế này

				<div class="pagination">
					<a href="#"> <i class="icon-left-open"></i> Next</a>
					<a href="#">Previous <i class="icon-right-open"></i></a>
				</div>

nhưng khi thêm icon vào, thì thuộc tính text-align: center của thẻ a trong class pagination không còn hoạt động đúng như ý muốn. chữ và icon không còn nằm giữa nữa
kết quả

Vì fontello không có link nhúng online, nên mình không chép được ví dụ trực tiếp lên để chạy (pencode)
How to fixed it?
Thank you.

tntxtnt · January 16, 2018, 3:39am

bỏ ra ngoài thẻ a?

và sửa lại thành Prev cho độ dài nó gần bằng với Next

hell6w9rld · January 16, 2018, 5:03am

mình muốn dấu < và > nằm trong chữ next và previuos luôn mà bạn, kiểu như 1 cái button ấy

tntxtnt · January 16, 2018, 5:14am

vậy tách ra 2 class riêng .prev với .next rồi chỉnh sửa từng pixel cho pơ phẹt

hell6w9rld · January 16, 2018, 5:32am

1 cách đơn giản hơn thêm kí tự   hoặc 