Phông chữ tùy chỉnh CSS tuyệt vời

Question

Tôi đang cố gắng sử dụng Phông chữ tuyệt vời để tạo biểu mẫu của mình. Nhưng biểu tượng FA đi kèm với một màu đầy. Khi tôi cố gắng thêm màu, nó được trao cho toàn bộ biểu tượng. Có cách nào để thực hiện điều này không? Hoặc tôi có nên sử dụng bất kỳ unicode nào khác không?

Lưu ý: Tôi chỉ phải thực hiện điều này bằng CSS. Thành phần chính không được cấu hình. Vì vậy, tôi phải vượt qua chỉ một lớp CSS để đạt được điều này. Xin vui lòng đề nghị tôi nếu có bất kỳ unicode khác mà tôi có thể sử dụng kể từ khi một trong đó Im sử dụng không thực sự trông giống như một trong hướng dẫn phong cách

-Cảm ơn bạn rất nhiều !!

Những gì tôi có:

Những hình ảnh đầu tiên là những gì tôi có. Hình ảnh thứ hai là làm thế nào là nó nghĩa vụ phải được như

.exclamation-red .validation-tooltip-text:before { border: none; content: "\f06a"; font-family: fontAwesome; left: 10px; position: absolute; font-size: 20px; top: 12px; color: white; }

Xin hãy giúp tôi ra ngoài. Cảm ơn bạn

Answer 1

Sử dụng fa-chấm than thay vào đó và bạn có thể tạo kiểu nó trong một hình tròn mà bạn sẽ thêm một đường viền màu trắng để.

.validation-tooltip-text:before { 
    content: "\f12a"; // http://fortawesome.github.io/Font-Awesome/icon/exclamation/ 
    font-family: fontAwesome; 
    left: 10px; 
    position: absolute; 
    font-size: 20px; 
    line-height:22px; 
    height: 22px; 
    width: 22px; 
    border-radius: 50%; 
    border: 2px solid #fff; 
    text-align: center; 
    vertical-align:middle; 
    top: 12px; 
    color: white; 
} 

http://codepen.io/partypete25/pen/dMwwvz?editors=1100

Answer 2

Vâng, biểu tượng FontAwesome không chính xác như những gì bạn muốn. Đối với người mới bắt đầu, nó không có viền, vì vậy ngay cả khi bạn có màu nền trong suốt, bạn sẽ không có đường viền màu trắng. Tôi khuyên bạn nên tự mình tạo 'biểu tượng'. Hãy thử một cái gì đó như thế này:

HTML:

<div class="exclamation-circle"> 
    &#x21; 
</div> 

CSS:

.exclamation-circle { 
    color: white; 
    width: 30px; 
    height: 30px; 
    font-size: 1em; 
    font-weight: bold; 
    background-color: transparent; 
    border: 2px solid white; 
    border-radius: 50%; 
    text-align: center; 
} 

bạn có thể chơi với font-size, div chiều rộng và chiều cao (đảm bảo width = chiều cao để làm cho nó một vòng tròn hoàn hảo), và độ dày biên giới, nhưng nó nên khá nhiều bao gồm nhu cầu của bạn.

Dưới đây là một ví dụ làm việc: https://jsfiddle.net/k61gaf9z/

Answer 3

tôi sẽ gợi ý thay đổi lớp biểu tượng để fa-exclamation. Hoặc bạn có thể thay đổi unicode thành "\f12a" và thêm đường viền màu trắng với bán kính đường viền. Đặt chiều rộng bằng chiều cao biểu tượng và căn giữa biểu tượng bên trong.

Something như thế này:

.exclamation-red { 
    border: 2px solid #FFFFFF; 
    border-radius: 50%; 
    width: /* set this to the same as the icon height */ 
    text-align: center; 
} 

.exclamation-red:before { 
    content: "\f12a"; 
    color: #FFFFFF; 
} 

Hãy thoải mái fiddle xung quanh với các giá trị để có được gần gũi hơn với chính xác những gì bạn đang tìm kiếm.

Ngoài ra nếu bạn đã không giới hạn chỉ CSS, bạn có thể stack các exclamation và circle-thin biểu tượng