01/10/2018, 14:10
Làm thế nào để căn giữa (text-align) icon fontello?
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.
Bài liên quan
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
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
vậy tách ra 2 class riêng
.prevvới.nextrồi chỉnh sửa từng pixel cho pơ phẹt1 cách đơn giản hơn thêm kí tự
hoặc