Skip to main content

How to Add Icons on webpage/HTML-CSS icons/font Awosme icons/Using of CD...

Image
By Prathima
Adding icons to a webpage using HTML and CSS is a common practice to enhance the visual appeal and user experience. One popular method for adding icons to your webpage is by using Font Awesome icons through a Content Delivery Network (CDN).

Include Font Awesome via CDN:

Start by including the Font Awesome library in your HTML file using a CDN. Add the following line to the <head> section of your HTML
html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/


This line links to the Font Awesome CSS file hosted on the CDN. Make sure to use the latest version if available.

Use Font Awesome Icons:

Once you've included Font Awesome, you can add icons to your HTML content by using the <i> or <span> element with the appropriate Font Awesome class. For example:


html
<i class="fas fa-home"></i> <!-- The home icon -->
<i class="fas fa-envelope"></i> <!-- The envelope icon -->
<i class="fas fa-phone"></i> <!-- The phone icon -->


In the above code, fas refers to the "solid" style of the icon, but Font Awesome offers different styles, such as far for regular and fab for brands.

Customize Icons:

You can customize the appearance of Font Awesome icons by adjusting their size, color, and other properties using CSS. For example:


  2. css
    .icon {
    font-size: 24px; /* Set the icon size */
    color: #007bff; /* Set the icon color */
}

    And in your HTML:

    html
    <i class="fas fa-home icon"></i>



  3. css
    .icon {
    font-size: 24px;
    color: #007bff;
    margin-right: 10px; /* Add margin to the right of the icon */
}

Additional Styling:

You can apply additional CSS styles to your icons as needed. For instance, you can add margins or padding to control the spacing around the icons.

Test in a Browser:

Save your HTML and CSS files and open them in a web browser to see the icons on your webpage. That's it! You've successfully added Font Awesome icons to your webpage using a CDN. You can explore the Font Awesome documentation for more icon options and advanced customization: https://fontawesome.com/icons Remember to replace the icon classes with the specific icons you want to use, and customize the CSS according to your design preferences.


Labels:

Comments

Post a Comment

If you have any Doubts plz let me know

Popular posts from this blog

Counter and its Function/Automation/Industrial Automation/PLC counter

By Prathima
What is counter A counter may be a digital circuit or device that counts the amount of products and returns predefined values supported clock pulse applications. The output of the counter are often wont to count the amount of pulses. The counter circuit is typically composed of several flip-flops connected within the cascade method. Counter automation and digitally based components are very widely used components.      Micro controller applications require external events or precise internal time delay generation and calculation of pulse frequency as required . These phenomena are often utilized in digital systems and automation. Both of those events are often performed by software techniques, but software loops for counting won't give accurate results, as little more important work isn't done. These problems are often corrected by timers and counters in micro controllers that are used as interrupts. Classification of counters In digital circuits, counters ...
Post a Comment
Read more

Latching and Unlatching Circuit Using Ladder Logic

By Prathima
 What is PLC A Programmable Logic Controller, or PLC, is a Micro controller Based Device  used for industrial automation. These controllers can make  automatic  for a specific process, machinery, Home Automation  or even an entire production line. Latching is used in plc as well as hardware circuit to make the circuit in continuously on condition.   Latching Circuit in PLC Generally Latching is a circuit used to keep the output continuously in on Condition. Latching is only applicable for the push button or switches which has spring act. When you are using hardware circuit you can use relay or contactors, these two components is used to make load in on condition. In Below concepts we can understand the concepts of latching and unlatching circuit by using switches   Case1: When you are using Toggle switch, latching is not required. Check in below circuit. In this case toggle switc...
Post a Comment
Read more

Level Indicator/Working and its uses

By Prathima
Level indicators   Level indicator is used to detect liquid levels. This is mainly used in water treatment plants, Sewage treatment facilities, buildings , housing complexes and so many other appliances. It will sense lower to higher level of water which is connected to control panel to give the information about the level of liquids. Water level indicator is a combination of probe  sensor or float switches. Working of level indicator   The mechanism of level indicator is quite simple. It will sense the level of liquid in storage tank by using sensor probes. When water reaches a certain level it will give signal to your connected device(Probes send information back to the control panel to trigger an alarm or any indicator. When we are using any type of sensor our motor is to control all the equipment automatically, here  also same, when you connecting the level indicator in storage tank, the control panel can be programmed to automatically turn on or off ...
1 comment
Read more