বড় গ্লাইফিকনস

Question

টুইটার বুটস্ট্র্যাপ 3.0.০ (২.৩.x নয়) এ কীভাবে আমি বড় গ্লাইফিকন তৈরি করব।

এই কোডটি আমার গ্লাইফিকনগুলিকে বড় করে তুলবে:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

আমি কিভাবে এই আকার পেতে পারেন ছাড়া ব্যবহার করার সময় btn-এলজি বর্গ ব্যবহার শুধুমাত্র কোনও স্প্যান?

এটি একটি ছোট গ্লাইফিকন দেয়:

<span class="glyphicon glyphicon-link"></span>

Answer 1

আপনি কেবল গ্লাইফিকনকে আপনার পছন্দ অনুসারে একটি ফন্ট-আকার দিতে পারেন:

span.glyphicon-link {
    font-size: 1.2em;
}

Comments

মহান! আমার ক্ষেত্রে, আমার কাছে একটি বোতামের সাথে একটি ইনপুট-গ্রুপ-বিটিএন ছিল এবং এই বোতামটি কিছুটা বড় ছিল। সুতরাং আমি আমার গ্লাইফিকনটির জন্য কেবল "ফন্ট-আকার: 95%" দিয়েছি এবং এটি সমাধান হয়ে গেছে।

— ভিক্টোর্ফ

Answer 2

আমি এটি কীভাবে করব তা এখানে:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

এটি আপনাকে ফ্লাইতে আকার পরিবর্তন করতে দেয়। সিএসএস পরিবর্তন করা এবং এটি সকলের জন্য প্রযোজ্য না হয়ে আকার পরিবর্তন করতে অ্যাডহক প্রয়োজনীয়তার জন্য সেরা কাজ করে।

Comments

সাধারণভাবে ইনলাইন শৈলীগুলি ভাল পদ্ধতির নয়। আপনার যদি কোনও উপাদানগুলির জন্য নির্দিষ্ট শৈলীর প্রয়োজন হয় তবে কেবলমাত্র এটির মূল শ্রেণীর মাধ্যমে নতুন ফন্ট-আকার প্রয়োগ করুন

— কালায়ান স্তামাতভ

কখনও কখনও এটি

— ম্যাথু লক

Answer 3

.btn-lgবর্গ বুটস্ট্র্যাপ 3 (নিম্নলিখিত সিএসএস হয়েছে লিংক ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

আপনি যদি একইরকম font-sizeএবং line-heightআপনার স্প্যানটিতে প্রয়োগ করেন (হয় .glyphicon-linkঅথবা .glyphicons-lgআপনি যদি নতুনভাবে তৈরি হয়ে থাকেন তবে আপনি যদি এই প্রভাবটি একাধিক ক্ষেত্রে ব্যবহার করতে যাচ্ছেন), আপনি বড় বোতামের মতো একটি আকারের গ্লাইফিকন পাবেন।

Comments

যোগ btn-lgবর্গ অনেক সহজ বিকল্প। ভাল উত্তর!

— নীল

Answer 4

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Answer 5

আমার ক্ষেত্রে আমার input-group-btnসাথে একটি ছিল buttonএবং এটি এর buttonধারকটির থেকে কিছুটা বড় ছিল। সুতরাং আমি কেবল font-size:95%আমার গ্লাইফিকন দিয়েছিলাম এবং এটি সমাধান হয়ে গেছে।

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

Answer 6

আপনার লেখার <span>মধ্যে <h1>বা <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

Answer 7

আপনি বুটস্ট্র্যাপ 3, ব্যবহার ট্যাগ, ভালো ব্যবহার করেন তাহলে <small><span class="glyphicon glyphicon-send"></span></small>এটা নিখুঁত কাজ করে বুটস্ট্র্যাপ 3. জন্য
এমনকি আপনি একাধিক ব্যবহার করতে পারেন <small>আকার আরো ছোট সেট করতে ট্যাগ।
কোড:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Comments

এটি প্রশ্নের একেবারে বিপরীত ... আপনি যদি স্টাইলগুলিকে ওভাররাইড না করেন তবে এটি এটিকে ছোট করে তুলবে। আমি এই ট্যাগটি অন্য দিন ঠিক তার সঠিক উদ্দেশ্যে ব্যবহার করেছি।

— রিচার্ড বার্কার