الخط رائع، نوع الإدخال "إرسال"

Question

يبدو أنه لا يوجد فئة لنوع الإدخال "إرسال" بخط رائع.هل من الممكن استخدام بعض الفئات من الخط الرائع لإدخال الزر؟لقد أضفت أيقونات إلى جميع الأزرار (التي ترتبط فعليًا بالفئة "btn" من twitter-bootstrap) في تطبيقاتي، لكن لا يمكنني إضافة أيقونات على "إرسال نوع الإدخال".

أو كيفية استخدام هذا الكود:

input#image-button{
    background: #ccc url('icon.png') no-repeat top left;
    padding-left: 16px;
    height: 16px;
}

لغة البرمجة:

<input type="submit" id="image-button">Text</input>

(الذي أخذت منه لغة البرمجة:كيفية عمل زر إرسال يحتوي على نص + صورة؟) مع الخط رائع؟

Answer 1

استخدم نوع الزر="إرسال" بدلا من الإدخال

giveacodicetagpre.

for font awesome 3.2.0 استخدم

giveacodicetagpre.

Answer 2

لغة البرمجة

منذ <input> يعرض العنصر قيمة سمة القيمة فقط، وعلينا التعامل معها فقط:

<input type="submit" class="btn fa-input" value="&#xf043; Input">

أنا استخدم  الكيان هنا، والذي يتوافق مع U+F043، رمز "الصبغة" الخاص بـ Font Awesome.

CSS

ثم يتعين علينا تصميمه لاستخدام الخط:

.fa-input {
  font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

والذي سيعطينا رمز الصبغة في Font Awesome والنص الآخر في الخط المناسب.

ومع ذلك، لن يكون عنصر التحكم هذا مثاليًا للبيكسل، لذا قد تضطر إلى تعديله بنفسك.

Answer 3

يمكنك استخدام الخط رهيبة UTF الغشيت

giveacodicetagpre.

هنا هو رابط الغش http://fortawesome.github.io/font-awesome/cheatsheet/

Answer 4

حسنًا، من الناحية الفنية ليس من الممكن الحصول عليها :before و :after العناصر الزائفة تعمل على input عناصر

من W3C:

12.1: قبل و: بعد العناصر الزائفة

يحدد المؤلفون نمط وموقع المحتوى الذي تم إنشاؤه مع: قبل و: بعد العناصر الزائفة.كما تشير أسماءهم ، فإن: قبل و: بعد العناصر الزائفة تحدد موقع المحتوى قبل وبعد محتوى شجرة المستند للعنصر.تحدد خاصية "المحتوى" ، بالتزامن مع هذه العناصر الزائفة ، ما تم إدراجه.

---

لذلك كان لدي مشروع حيث قمت بإرسال أزرار على شكل input العلامات ولسبب ما قام المطورون الآخرون بتقييد استخدامها <button> بدلاً من أزرار إرسال الإدخال المعتادة، لذلك توصلت إلى حل آخر، وهو تغليف الأزرار داخل ملف span ضبط ل position: relative; ثم تحديد موضع الرمز تمامًا باستخدام :after مستعار.

ملحوظة:يستخدم الكمان التجريبي رمز المحتوى الخاص بـ Fontawomesom 3.2.1 لذلك قد تحتاج إلى تغيير قيمة content الممتلكات وفقا لذلك.

لغة البرمجة

<span><input type="submit" value="Send" class="btn btn-default" /></span>

CSS

input[type="submit"] {
    margin: 10px;
    padding-right: 30px;
}

span {
    position: relative;
}

span:after {
    font-family: FontAwesome;
    content: "\f004"; /* Value may need to be changed in newer version of font awesome*/
    font-size: 13px;
    position: absolute;
    right: 20px;
    top: 1px;
    pointer-events: none;
}

تجريبي

الآن هنا كل شيء واضح بذاته هنا، حول خاصية واحدة، أي pointer-events: none;, ، لقد استخدمت ذلك لأنه عند المرور فوق :after المحتوى الذي تم إنشاؤه زائفًا، لن يتم النقر على الزر الخاص بك، لذا استخدم قيمة none سيجبر إجراء النقر على المرور عبر هذا المحتوى.

من شبكة مطوري موزيلا :

بالإضافة إلى الإشارة إلى أن العنصر ليس هو هدف أحداث الماوس ، فإن القيمة لا شيء يوجه حدث الماوس للذهاب "من خلال" العنصر واستهداف كل ما هو "أسفل" هذا العنصر بدلاً من ذلك.

قم بتمرير الخط/الرمز على شكل قلب تجريبي وانظر ماذا سيحدث إذا لم تستخدمه pointer-events: none;

Answer 5

يمكنك استخدام فئات الأزرار btn-link و btn-xs مع النوع submit, ، والذي سيشكل زرًا صغيرًا غير مرئي به رمز بداخله.مثال:

<button class="btn btn-link btn-xs" type="submit" name="action" value="delete">
    <i class="fa fa-times text-danger"></i>
</button>

Answer 6

ممكن أيضا مثل هذا

giveacodicetagpre.

Answer 7

مع تقدم متعددة، عندما تحتاج إلى قيمة الإرسال المحدد، يمكن القيام بذلك بسهولة كبيرة.ما عليك سوى إنشاء حقل مخفي في النموذج الخاص بك وتغيير قيمته اعتمادا على ما يتم النقر فوق الزر.على سبيل المثال، في النموذج، قل لديك:

giveacodicetagpre.

باستخدام jQuery:

giveacodicetagpre.

ثم يمكنك استرداد قيمة الزر النقر فوق "النقر فوق" متغير النشر