Khoảng cách giữa hình chữ nhật và văn bản?

Question

Tôi đang cố thêm biểu tượng hình tượng như một phần của liên kết địa chỉ email. Biểu tượng hiển thị nhưng không có khoảng cách giữa biểu tượng và văn bản địa chỉ email (Tôi muốn siêu liên kết bao gồm cả biểu tượng và văn bản ... bao gồm cả khoảng trắng). Cách tốt nhất để thực hiện việc này là gì?

 <a href="mailto:someone@somewheredotcom" title="Some Email"> 
     <span class="glyphicon glyphicon-envelope">someone@somewheredotcom</span> 
    </a> 

Answer 1

Bạn có thể thử để làm điều này:

.glyphicon-envelope:before { 
    margin-right: 5px; 
} 

lưu ý rằng tập tin css tùy chỉnh của bạn nên được bao gồm sau bootstrap.css

Answer 2

Nếu sử dụng glyphicon chỉ cần thêm một khoảng trắng sau </span> thẻ như bên dưới

<a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Individual</a> 

Nếu bạn sử dụng glyphicon cùng với tham chiếu thư viện font awesome chỉ cần thêm fa-fw vào cuối lớp học.

<a href="mailto:someone@somewheredotcom" title="Some Email"> 
    <span class="glyphicon glyphicon-envelope fa-fw">someone@somewheredotcom</span> 
</a> 

Answer 3

Theo Bootstrap:

lớp Biểu tượng chỉ nên được sử dụng trên các yếu tố không chứa nội dung văn bản và> không có phần tử con.

Bạn nên đặt địa chỉ email bên ngoài của gian tồn tại:

<span class="glyphicon glyphicon-envelope fa-fw"></span>someone@somewheredotcom 

Answer 4

Từ http://getbootstrap.com/components/, xem ghi chú này

Hãy chắc chắn để lại một khoảng trống giữa các biểu tượng và văn bản cho đệm thích hợp.

Vì vậy, bạn có thể thay đổi CSS nếu muốn, ví dụ như sử dụng ý tưởng Bogdan, hoặc chỉ bằng cách thêm   giữa biểu tượng và văn bản của bạn:

<a href="mailto:someone@somewheredotcom" title="Some Email"> 
    <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;someone@somewheredotcom 
</a>