Icon in the footer of Bootstrap

This is the foundation of most of my web projects that I enjoy creating. I am interested in incorporating image links instead of relying on local files. Any assistance would be greatly appreciated.

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>$title$</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Bootstrap template</h1>
  <p>$text$</p> 
    <footer class="blog-footer">
      <p>Created by Kevin Leong</p>
      <a target="_blank" href="#"><img src="/assets/social-icons/facebook_icon.png" width="30" height="30" class="img-fluid"></a>
  
      <a target="_blank" href="#"><img src="/assets/social-icons/twitter-icon.png" width="30" height="30" class="img-fluid"></a>
  
      <a target="_blank" href="#"><img src="/assets/social-icons/instagram.png" width="30" height="30" class="img-fluid"></a>
  
      <a target="_blank" href="#"><img src="/assets/social-icons/linked-in-icon.png" width="30" height="30" class="img-fluid"></a>
  
      <a target="_blank" href="#"><img src="/assets/social-icons/pinterest-icon.png" width="30" height="30" class="img-fluid"></a>
  
      <a target="_blank" href="#"><img src="/assets/social-icons/flickr-icon.png" width="30" height="30" class="img-fluid"></a>
    </footer>
</div>
</body>
</html>

Answer №1

To insert external images into your content, follow these steps:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Aster_Tataricus.JPG/321px-Aster_Tataricus.JPG" />

Simply right-click on the image you want to use online and choose copy image address. Then paste this link inside the src="" attribute of an img element. Remember to only select images from reliable sources such as and that grant permission for image usage.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you provide some insight on how to store XMLHttpRequest response in Javascript for future

I have a function in my codebase that is responsible for loading HTML templates asynchronously: loadTemplate: function(url) { return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open("GET" ...

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

Can you help me create a CSS Toggle similar to this design?

I am currently working on a website and I need to create a FAQs page with a specific layout. When a user clicks on a question (Q), the answer (A) should open smoothly using jQuery animation. Only one question should be visible at a time. If a user clicks ...

Overflowing dropdown menus on a dynamic navigation bar

After creating a navigation bar with dropdown links, I encountered an issue where hovering over the link to open the drop-down caused it to overflow to the right. Since the button is positioned at the right end of the navbar, it resulted in the scrollbar a ...

Preventing Event Propagation in Angular HTML

I am encountering an issue with stopPropagation, and I need assistance with implementing it in HTML and TypeScript for Angular. The problem is that the dialog opens but also triggers a propagation. Below is my code snippet in HTML: <label for="tab-two ...

What could be causing the lack of access to the prerender.io service in this particular setup?

I am the owner of a Angular application running on an Apache server. To enable prerendering, I added <meta name="fragment" content="!" /> in the <head> section and set $locationProvider.html5Mode(true); In my Apache server's .htaccess fi ...

Creating virtual hover effects on Android browsers for touch events

My Wordpress website is currently utilizing Superfish 1.5.4 to display menu items. The menu on my site includes several main menu items, which are clickable pages, and hovering over these main items should reveal sub-menu options. When I hover over a mai ...

The initial Bootstrap row stands out among the rest

Having an issue with my Bootstrap 4 page layout, as shown in the screenshot below. The first row appears compressed while the subsequent rows adjust properly for mobile view. I've tried different solutions but can't seem to fix it. Any suggestion ...

Add a foundation to this CSS pyramid

After experimenting with a demo I discovered at the following link: http://codepen.io/singhiskng/pen/dqiGj My goal is to create a four-sided pyramid. <div id="pyramid-container"> <div id="pyramid"> <div class="fac ...

HTML - header banner with missing links

Currently in the process of learning web development and constructing a practice website, I have encountered some challenges. Specifically, I am attempting to add a background/banner behind the section containing links to other websites. I believe that I h ...

Utilizing multiple instances of fs.writeFile in Node.js

I am currently managing a hotel's check-in/out information on an http server in Node.js. I store all the JSON data in memory and write it to a file using "fs.writeFile". Typically, the data does not exceed 145kB, but when consecutive calls to fs.write ...

Sorting an array of Material-UI's <TableRow> alphabetically using ReactJS and Material-UI. How to do it!

I am currently utilizing Material-UI's <Table> and <TableRow> components by rendering an array of <TableRow>s using the .map() method. Each <TableRow> contains a <TableRowColumn> representing a first name, for example: &l ...

Adjust and resize video backgrounds within parent elements on iframes

Consider the code snippet below: <div class="viewport"> <iframe src="youtube.com/blabla"></iframe> </div> Accompanied by this CSS: .viewport { height: 100vh; width: 100%; } iframe { position: absolute; } If we t ...

Get all instances of a particular attribute value within an interface

In my TypeScript code, I have defined an interface and two constants: interface Foo { readonly name: string; }; const FOO_1: Foo = { name: 'zing' }; const FOO_2: Foo = { name: 'baz' }; Is there a way to find all instances ...

Guide on aligning two boxes in the center with HTML, CSS, and Bootstrap

Is there a way to perfectly center two buttons or clickable boxes, creating a layout similar to the image shown below? https://i.sstatic.net/Va1z2.png This is what has been attempted so far: CSS file .container_1 .panel_1 { position: absolute; ...

Placing miniature vessels within a larger vessel, where two small containers fit on one level of the larger container (refer to images)

I am looking for a way for users to input text in the "your text" container and then click "add". This action should create a new container within the larger red-lined container with the information provided by the user. I know how to do this already, but ...

Click on an element that is nested within another element that can also be clicked on

I'm facing a challenge while attempting to create an accordion inside another accordion. The issue arises with the nested elements and their behavior upon clicking. Essentially, I have a parent div with the class .applicant, which expands on click by ...

Seamless transition between fieldsets by selecting radio buttons

I've scoured the internet, but I can't find a solution that fits my needs. Although I'm relatively new to jquery/javascript, I believe what I want to achieve is quite straightforward. There are 2 radio buttons for user selection, and based ...

Modifying the value of a React input component is restricted when the "value" field is utilized

I'm currently utilizing material-UI in my React application. I am facing a challenge where I need to remove the value in an input field by clicking on another component. The issue arises when using the OutlinedInput component with a specified value. ...

ngResource/$resource injection was not done correctly

I am currently working on developing a client for an API, and I am encountering an issue with the $resource module not being correctly injected. Despite adding ngResource to the module and passing it into the factory declaration, I am facing an error when ...