FreeCodeCamp(Part 2)

  • Use Spans for Inline Elements

You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?
This image illustrates the difference between inline elements and block-level elements:

image.png

By using the span element, you can put several elements together, and even style different parts of the same element differently.
Your span element should be inside your p element

  • Create a Custom Heading
  • Add Font Awesome Icons to our Buttons

Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.
You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML:
<link rel="stylesheet" />
The i element was originally used to make other elements italic, but is now commonly used for icons. You add the Font Awesome classes to the i element to turn it into an icon, for example:

<i class="fa fa-info-circle"></i>

Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fa and fa-thumbs-up.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,854評(píng)論 0 10
  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的閱讀 13,660評(píng)論 5 6
  • 歲月揉碎了古韻,升起了一縷風(fēng)塵,纖指拂去了霜痕,驚醒了一夜夢(mèng)魂。古道荒草湮沒了伊人清淺的足跡,卻將相思撒落一地。輕...
    曾鴻閱讀 656評(píng)論 0 2
  • 1、刷朋友圈與做短線的能量消耗,相當(dāng)于過馬路。 2、撰寫關(guān)于房產(chǎn)價(jià)格資產(chǎn)價(jià)格變化的邏輯——各種會(huì)議,包括親子溝通也...
    103d2031e8c2閱讀 236評(píng)論 0 0
  • 今天上午,國(guó)內(nèi)首個(gè) SaaS 模式的云告警平臺(tái) OneAlert 正式發(fā)布 ios 版 APP,每個(gè) ios 用戶...
    OneAPM閱讀 438評(píng)論 0 0

友情鏈接更多精彩內(nèi)容